TEXT TO SPEECH CONVERTER TOOL

Here's a simple example of HTML, CSS, and JavaScript code that uses ResponsiveVoice.js to convert text to speech with voice selection and support for multiple languages: HTML ```

Text to Speech Converter

``` CSS (in style.css file) ``` body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 80%; max-width: 600px; } textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; } select { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; } button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; } button:hover { background-color: #0056b3; } #stop { background-color: #dc3545; } #stop:hover { background-color: #c82333; } ``` JavaScript (in script.js file) ``` let voices = []; document.addEventListener('DOMContentLoaded', function() { populateVoices(); document.getElementById('speak').addEventListener('click', speak); document.getElementById('stop').addEventListener('click', stop); }); function populateVoices() { voices = responsiveVoice.getVoices(); let voiceSelect = document.getElementById('voice'); voices.forEach(voice => { let option = document.createElement('option'); option.textContent = voice.name; option.value = voice.name; voiceSelect.appendChild(option); }); } function speak() { let text = document.getElementById('text').value; let voice = document.getElementById('voice').value; responsiveVoice.speak(text, voice); } function stop() { responsiveVoice.cancel(); } ``` How It Works: 1. *HTML Structure*: Provides a simple interface with a textarea for input, a select dropdown for voice selection, and buttons to start and stop speech. 2. *CSS Styling*: Adds basic styling to make the interface more user-friendly. 3. *JavaScript Logic*: - Populates the voice select dropdown with available voices from ResponsiveVoice.js. - Listens for click events on the speak and stop buttons. - Uses ResponsiveVoice.js to speak the text in the selected voice when the speak button is clicked. - Stops any ongoing speech when the stop button is clicked. *Note*: You need to replace `YOUR_API_KEY` with your actual ResponsiveVoice API key in the script tag. If you don't have one, you can get it from the ResponsiveVoice website. Also, be aware of the terms of service and usage limits for the free tier.