Text-to-Speech Converter
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.container {
background-color: #ffffff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
}
h1 {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
color: #4A90E2;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
border-radius: 8px;
border: 1px solid #ddd;
font-size: 16px;
margin-bottom: 20px;
resize: none;
}
.controls {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.btn {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #45a049;
}
.settings {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
font-weight: bold;
}
select, input[type="range"] {
margin-bottom: 15px;
padding: 5px;
border-radius: 8px;
border: 1px solid #ddd;
}
input[type="range"] {
width: 100%;
}
span {
font-weight: bold;
}
@media screen and (max-width: 768px) {
.container {
padding: 20px;
}
h1 {
font-size: 20px;
}
}
// Get the elements
const textInput = document.getElementById('text-input');
const speakBtn = document.getElementById('speak-btn');
const stopBtn = document.getElementById('stop-btn');
const rateSlider = document.getElementById('rate');
const rateValue = document.getElementById('rate-value');
const volumeSlider = document.getElementById('volume');
const volumeValue = document.getElementById('volume-value');
const voiceSelect = document.getElementById('voice-select');
// Initialize SpeechSynthesis API
let synth = window.speechSynthesis;
let voices = [];
// Load available voices
function loadVoices() {
voices = synth.getVoices();
voiceSelect.innerHTML = '';
voices.forEach((voice, index) => {
let option = document.createElement('option');
option.textContent = voice.name;
option.value = index;
voiceSelect.appendChild(option);
});
}
// Set up initial values
loadVoices();
// Event listener for voices update
if (synth.onvoiceschanged !== undefined) {
synth.onvoiceschanged = loadVoices;
}
// Speak the input text
function speakText() {
if (textInput.value !== '') {
const utterance = new SpeechSynthesisUtterance(textInput.value);
// Set voice, rate, and volume
utterance.voice = voices[voiceSelect.value];
utterance.rate = rateSlider.value;
utterance.volume = volumeSlider.value;
synth.speak(utterance);
} else {
alert('Please enter some text!');
}
}
// Stop speaking
function stopSpeech() {
synth.cancel();
}
// Update rate and volume values
rateSlider.addEventListener('input', () => {
rateValue.textContent = rateSlider.value;
});
volumeSlider.addEventListener('input', () => {
volumeValue.textContent = volumeSlider.value;
});
// Event listeners for buttons
speakBtn.addEventListener('click', speakText);
stopBtn.addEventListener('click', stopSpeech);
