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
config.pyREADME.md
README.md
Raw Download

README.md

# Voice Assistant Chatbot

<!--
Voice Assistant Chatbot - README
Developed by: RSK World
Website: https://rskworld.in
Email: help@rskworld.in
Phone: +91 93305 39277
Year: 2026
-->

A modern, voice-enabled chatbot with speech recognition and text-to-speech capabilities. This project integrates Web Speech API for real-time voice interactions, allowing users to communicate with the chatbot using voice commands.

## Features

### Core Features
- **Speech-to-Text**: Convert spoken words into text using browser's speech recognition
- **Text-to-Speech**: Convert text responses into natural voice output
- **Voice Commands**: Support for various voice commands and natural language processing
- **Audio Processing**: Real-time audio processing and voice interaction
- **Real-time Voice Interaction**: Seamless two-way voice communication
- **Customizable Settings**: Adjustable voice, rate, pitch, and volume settings
- **Modern UI**: Beautiful, responsive design with gradient backgrounds

### Advanced Features
- **Audio Visualization**: Real-time waveform visualization of voice input
- **Conversation History**: Complete chat history with timestamps
- **Multi-Language Support**: Support for 10+ languages (English, Spanish, French, German, Italian, Portuguese, Hindi, Japanese, Chinese, and more)
- **Dark Mode**: Toggle between light and dark themes
- **Export Chat History**: Download your conversation as a text file
- **Continuous Listening Mode**: Hands-free operation with continuous voice recognition
- **Conversation Statistics**: Track messages, interactions, and session duration
- **Context Awareness**: Remembers conversation context for better responses
- **Enhanced Natural Language Understanding**: Improved command recognition and response generation
- **Voice Activity Detection**: Visual feedback during voice input
- **Auto-Speak Toggle**: Control whether responses are automatically spoken
- **Session Timer**: Track how long you've been chatting

## Technologies Used

- **HTML5**: Structure and semantic markup
- **CSS3**: Modern styling with gradients and animations
- **JavaScript (ES6+)**: Core functionality and Web Speech API integration
- **Web Speech API**: Browser-native speech recognition and synthesis
- **Font Awesome**: Icons for enhanced UI

## Browser Compatibility

This project uses the Web Speech API, which is supported in:
- Chrome/Edge (Chromium-based browsers)
- Safari (with limited support)
- Firefox (limited support)

**Note**: For best experience, use Chrome or Edge browser.

## Installation

1. Download or clone this project
2. Extract the files to your web server directory
3. Open `index.html` in a modern web browser
4. Ensure you have a working microphone for voice input

## Usage

### Basic Usage

1. **Text Input**: Type your message in the input field and click the send button or press Enter
2. **Voice Input**: Click the microphone button to start voice recording
3. **Voice Commands**: Try saying:
- "Hello" or "Hi" to greet the assistant
- "What time is it?" to get the current time
- "What's the date?" to get today's date
- "Tell me a joke" for a random joke
- "Calculate 5 plus 3" for basic math
- "Help" to see available commands

### Settings

Click the Settings button to customize:
- **Voice**: Choose from available system voices
- **Speech Rate**: Control how fast the assistant speaks (0.5x to 2x)
- **Pitch**: Adjust the voice pitch (0 to 2)
- **Volume**: Control the output volume (0 to 1)
- **Language**: Select from 10+ supported languages
- **Continuous Listening Mode**: Enable hands-free operation
- **Auto Speak Responses**: Toggle automatic text-to-speech
- **Show Audio Visualizer**: Display real-time audio waveform

Settings are automatically saved to your browser's local storage.

### Advanced Controls

- **Export Button**: Download your chat history as a text file
- **Statistics Button**: View conversation statistics and analytics
- **Dark Mode Button**: Toggle between light and dark themes
- **Clear Chat**: Reset the conversation (statistics are preserved)

## Project Structure

```
voice-assistant-chatbot/
├── index.html # Main HTML file
├── styles.css # CSS styling
├── script.js # JavaScript functionality
└── README.md # This file
```

## Features in Detail

### Speech Recognition
- Uses Web Speech API for browser-native speech-to-text
- Supports continuous and single recognition modes
- Error handling for unsupported browsers

### Text-to-Speech
- Multiple voice options
- Adjustable rate, pitch, and volume
- Natural language responses

### Voice Commands
The chatbot recognizes and responds to:
- **Greetings**: "Hello", "Hi", "Hey"
- **Time & Date**: "What time is it?", "What's the date?"
- **Calculations**: "Calculate 5 plus 3", "What is 10 times 4"
- **Entertainment**: "Tell me a joke", "Say something funny"
- **Settings Control**:
- "Enable continuous mode"
- "Turn on visualizer"
- "Dark mode"
- "Show statistics"
- **General Conversation**: Natural language interaction with context awareness

## Advanced Features Explained

### Audio Visualization
The audio visualizer shows real-time waveform of your voice input. Enable it in settings to see visual feedback while speaking.

### Conversation History
All messages are stored with timestamps. You can export the entire conversation history as a text file using the Export button.

### Multi-Language Support
Switch between languages in settings. The assistant will recognize and respond in the selected language.

### Continuous Listening Mode
When enabled, the assistant keeps listening after each interaction, allowing for hands-free operation. Say "stop" or click the microphone button to pause.

### Context Awareness
The assistant remembers the last few messages in the conversation, allowing for more natural and contextually relevant responses.

### Statistics & Analytics
Track your usage with detailed statistics including:
- Total messages sent and received
- Voice interactions count
- Session duration
- Message breakdown

## Development

### Customization

To add custom responses, modify the `generateResponse()` method in `script.js`:

```javascript
generateResponse(input) {
const lowerInput = input.toLowerCase().trim();

// Add your custom commands here
if (lowerInput.includes('your-keyword')) {
return "Your custom response";
}

// ... existing code
}
```

### Adding New Features

1. **New Voice Commands**: Add conditions in the `generateResponse()` method
2. **UI Enhancements**: Modify `styles.css` for styling changes
3. **Additional Settings**: Add new controls in `index.html` and handle them in `script.js`
4. **New Languages**: Add language options to the language select dropdown
5. **Custom Visualizations**: Modify the `visualize()` method for different visualization styles

## Browser Permissions

The application requires microphone access for voice input. When you first use the voice feature, your browser will prompt you to allow microphone access. Please grant permission for the voice features to work.

## Troubleshooting

### Voice Recognition Not Working
- Ensure microphone permissions are granted
- Check that you're using a supported browser (Chrome/Edge recommended)
- Verify your microphone is working in other applications

### Text-to-Speech Not Working
- Check browser console for errors
- Verify that system voices are available
- Try selecting a different voice in settings

### Settings Not Saving
- Ensure localStorage is enabled in your browser
- Check browser console for any errors

## License

This project is provided as free source code by RSK World.

## Contact

**RSK World**
Website: [https://rskworld.in](https://rskworld.in)
Email: [help@rskworld.in](mailto:help@rskworld.in)
Phone: [+91 93305 39277](tel:+919330539277)

## Credits

Developed by RSK World - Free Programming Resources & Source Code
Year: 2026

---

© 2026 RSK World. All rights reserved.

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