English · 日本語 · 繁體中文 · 简体中文 · Deutsch · Français · Español · Bahasa Indonesia

A modern, feature-rich text-to-speech web application built with React and TypeScript. VoiceFlow provides an intuitive interface for converting text to natural-sounding speech with real-time word highlighting, customizable voice settings, and content management capabilities.

VoiceFlow's intuitive interface featuring real-time word highlighting, customizable voice controls, and content management.

• Text-to-Speech Conversion: High-quality speech synthesis using the Web Speech API
• Real-time Word Highlighting: Visual feedback with animated word highlighting during playback
• Voice Controls: Play, pause, and stop functionality with responsive controls
• Multiple Voice Support: Choose from available system voices with language detection

• Adjustable Speech Rate: Control playback speed from 0.5x to 2x
• Pitch Control: Fine-tune voice pitch for optimal listening experience
• Volume Control: Adjust audio output level
• Voice Selection: Choose from available system voices

• Text Library: Organize multiple text documents with titles
• Add/Edit/Delete: Full CRUD operations for text content
• Content Switching: Seamless switching between different texts
• Persistent Storage: Content saved locally in the browser

• Modern Dark Theme: Sleek, eye-friendly dark interface
• Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• Gradient Branding: Beautiful gradient text and visual elements
• Intuitive Controls: User-friendly interface with clear visual feedback

• Node.js (version 16 or higher)
• npm or yarn package manager
• Modern web browser with Web Speech API support

1. Clone the repository

   git clone https://github.com/didvc/text-to-speech.git
   cd text-to-speech

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:5173 to see the application

npm run build
# or
yarn build

The built files will be available in the dist/ directory.

1. Select or Add Text: Choose from the pre-loaded examples or add your own text content
2. Customize Settings: Adjust voice, speed, pitch, and volume to your preference
3. Play: Click the play button to start text-to-speech conversion
4. Follow Along: Watch the real-time word highlighting as the text is read

• Content Management: Use the text library to organize multiple documents
• Voice Switching: Experiment with different voices and languages
• Speed Control: Adjust reading speed for comprehension or accessibility needs
• Mobile Support: Full functionality available on mobile devices

• Frontend Framework: React 18
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Icons: Lucide React
• Speech API: Web Speech API (SpeechSynthesis)

VoiceFlow works on modern browsers that support the Web Speech API:

• Chrome/Chromium (recommended)
• Edge
• Safari
• Firefox (limited voice selection)
• Mobile browsers (iOS Safari, Chrome Mobile)

VoiceFlow is designed to work seamlessly across all device types:

• Desktop: Full feature set with optimized layout
• Tablet: Touch-friendly interface with adaptive controls
• Mobile: Compact design with essential features accessible

We welcome contributions from the community! Please see our Contributing Guidelines for details on how to get started.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Commit your changes (git commit -m 'Add amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Bug Reports: Create an issue
• Feature Requests: Request a feature
• Discussions: Join the conversation

• Web Speech API for providing the text-to-speech functionality
• React and TypeScript communities for excellent tooling
• Tailwind CSS for the beautiful styling system
• Lucide React for the clean, modern icons

• Build Size: Optimized for fast loading
• Dependencies: Minimal and carefully selected
• Performance: Smooth 60fps animations and responsive interactions
• Accessibility: WCAG compliant with keyboard navigation support