help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
voice-assistant-chatbot
RSK World
voice-assistant-chatbot
Voice Assistant Chatbot - JavaScript + Web Speech API + Speech Recognition + Text-to-Speech + Voice Commands + AI
voice-assistant-chatbot
  • .gitignore470 B
  • DATA_STORAGE.md6.2 KB
  • ERROR_FIXES.md4.1 KB
  • GITHUB_RELEASE_INSTRUCTIONS.md5.9 KB
  • LICENSE1.2 KB
  • README.md8.1 KB
  • RELEASE_NOTES.md6.5 KB
  • config.js2.3 KB
  • index.html7 KB
  • script.js41.6 KB
  • styles.css9.7 KB
index.html
index.html
Raw Download
Find: Go to:
<!DOCTYPE html>
<html lang="en">
<head>
    <!--
        Voice Assistant Chatbot
        Developed by: RSK World
        Website: https://rskworld.in
        Email: help@rskworld.in
        Phone: +91 93305 39277
        Year: 2026
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voice Assistant Chatbot - RSK World</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-microphone"></i> Voice Assistant Chatbot</h1>
            <p class="subtitle">Powered by RSK World - Free Programming Resources & Source Code</p>
        </header>

        <div class="chat-container">
            <div class="chat-messages" id="chatMessages">
                <div class="message bot-message">
                    <div class="message-content">
                        <i class="fas fa-robot"></i>
                        <p>Hello! I'm your voice assistant. Click the microphone button or say "Hello" to start talking with me.</p>
                    </div>
                </div>
            </div>

            <div class="input-container">
                <div class="input-wrapper">
                    <input type="text" id="textInput" placeholder="Type your message or use voice..." />
                    <button id="sendBtn" class="btn-send" title="Send message">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                    <button id="voiceBtn" class="btn-voice" title="Start voice recording">
                        <i class="fas fa-microphone"></i>
                    </button>
                </div>
                <div class="voice-status" id="voiceStatus"></div>
            </div>
        </div>

        <div class="controls">
            <button id="clearBtn" class="btn-clear">
                <i class="fas fa-trash"></i> Clear Chat
            </button>
            <button id="exportBtn" class="btn-export" title="Export chat history">
                <i class="fas fa-download"></i> Export
            </button>
            <button id="statsBtn" class="btn-stats" title="View statistics">
                <i class="fas fa-chart-bar"></i> Stats
            </button>
            <button id="darkModeBtn" class="btn-dark" title="Toggle dark mode">
                <i class="fas fa-moon"></i>
            </button>
            <button id="settingsBtn" class="btn-settings">
                <i class="fas fa-cog"></i> Settings
            </button>
        </div>

        <div class="audio-visualizer" id="audioVisualizer">
            <canvas id="visualizerCanvas"></canvas>
        </div>

        <div class="stats-panel" id="statsPanel">
            <h3>Conversation Statistics</h3>
            <div class="stats-content">
                <div class="stat-item">
                    <span class="stat-label">Total Messages:</span>
                    <span class="stat-value" id="totalMessages">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Your Messages:</span>
                    <span class="stat-value" id="userMessages">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Bot Responses:</span>
                    <span class="stat-value" id="botMessages">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Voice Interactions:</span>
                    <span class="stat-value" id="voiceInteractions">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Session Duration:</span>
                    <span class="stat-value" id="sessionDuration">0:00</span>
                </div>
            </div>
            <button id="closeStats" class="btn-close">Close</button>
        </div>

        <div class="settings-panel" id="settingsPanel">
            <h3>Settings</h3>
            <div class="setting-item">
                <label for="voiceSelect">Voice:</label>
                <select id="voiceSelect"></select>
            </div>
            <div class="setting-item">
                <label for="rateSelect">Speech Rate:</label>
                <input type="range" id="rateSelect" min="0.5" max="2" step="0.1" value="1">
                <span id="rateValue">1.0</span>
            </div>
            <div class="setting-item">
                <label for="pitchSelect">Pitch:</label>
                <input type="range" id="pitchSelect" min="0" max="2" step="0.1" value="1">
                <span id="pitchValue">1.0</span>
            </div>
            <div class="setting-item">
                <label for="volumeSelect">Volume:</label>
                <input type="range" id="volumeSelect" min="0" max="1" step="0.1" value="1">
                <span id="volumeValue">1.0</span>
            </div>
            <div class="setting-item">
                <label for="languageSelect">Language:</label>
                <select id="languageSelect">
                    <option value="en-US">English (US)</option>
                    <option value="en-GB">English (UK)</option>
                    <option value="es-ES">Spanish</option>
                    <option value="fr-FR">French</option>
                    <option value="de-DE">German</option>
                    <option value="it-IT">Italian</option>
                    <option value="pt-BR">Portuguese</option>
                    <option value="hi-IN">Hindi</option>
                    <option value="ja-JP">Japanese</option>
                    <option value="zh-CN">Chinese</option>
                </select>
            </div>
            <div class="setting-item">
                <label>
                    <input type="checkbox" id="continuousMode"> Continuous Listening Mode
                </label>
            </div>
            <div class="setting-item">
                <label>
                    <input type="checkbox" id="autoSpeak"> Auto Speak Responses
                </label>
            </div>
            <div class="setting-item">
                <label>
                    <input type="checkbox" id="showVisualizer"> Show Audio Visualizer
                </label>
            </div>
            <button id="closeSettings" class="btn-close">Close</button>
        </div>
    </div>

    <footer>
        <p>© 2026 <a href="https://rskworld.in" target="_blank">RSK World</a> - Free Programming Resources & Source Code</p>
        <p>Email: <a href="mailto:help@rskworld.in">help@rskworld.in</a> | Phone: <a href="tel:+919330539277">+91 93305 39277</a></p>
    </footer>

    <script src="config.js"></script>
    <script src="script.js"></script>
</body>
</html>
163 lines•7 KB
markup

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer