Text to Speech Converter
Certainly! Below is a complete implementation of a Text-to-Speech converter using the ResponsiveVoice.js library. This implementation allows users to input text, select a voice and language, and convert the text to speech with colorful styling.
HTML Structure
```html
Text to Speech Converter
```
### CSS Styling (styles.css)
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 0;
}
.container {
text-align: center;
margin: 50px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 400px;
}
h1 {
color: #4A90E2;
}
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 15px;
resize: none;
}
.controls {
display: flex;
justify-content: space-between;
}
select {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
flex-grow: 1;
margin-right: 10px;
}
button {
padding: 10px 15px;
background-color: #FF5722; /* Vibrant orange */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #E64A19; /* Darker orange */
}
```
### JavaScript Functionality (script.js)
```javascript
document.addEventListener('DOMContentLoaded', () => {
const voiceSelect = document.getElementById('voice-select');
const speakButton = document.getElementById('speak-button');
const textInput = document.getElementById('text-input');
// Populate voice options
function populateVoiceList() {
const voices = responsiveVoice.getVoices();
voiceSelect.innerHTML = '';
voices.forEach(voice => {
const option = document.createElement('option');
option.value = voice.name;
option.textContent = `${voice.name} (${voice.lang})`;
voiceSelect.appendChild(option);
});
}
// Event listeners
responsiveVoice.onvoiceschanged = populateVoiceList;
speakButton.addEventListener('click', () => {
const text = textInput.value;
const selectedVoice = voiceSelect.value;
if (text) {
responsiveVoice.speak(text, selectedVoice);
} else {
alert('Please enter some text to speak.');
}
});
});
```
Instructions
1. **API Key**: Replace `YOUR_API_KEY` in the HTML file with your ResponsiveVoice API key. You can get one from the [ResponsiveVoice website](https://responsivevoice.org/).
2. **File Structure**: Create three files named `index.html`, `styles.css`, and `script.js`. Copy the respective code snippets into these files.
3. **Run the Tool**: Open `index.html` in a web browser. You should see a text area where you can enter text, a dropdown to select the voice, and a button to convert text to speech.
Features
- **Text Input**: Users can enter any text they wish to convert to speech.
- **Voice Selection**: Users can choose from a list of available voices and languages.
- **Responsive Design**: The UI is designed to be simple and visually appealing with colorful elements.
Feel free to expand this implementation with additional features, such as pitch and rate controls, or improve the user interface with further styling!
Comments
Post a Comment