Speech to Text Converter
Speech to Text Converter
Press the microphone button to start speaking.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
text-align: center;
width: 400px;
}
h1 {
color: #3a3a3a;
margin-bottom: 20px;
}
.speech-box {
display: flex;
flex-direction: column;
align-items: center;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin: 10px;
}
button:disabled {
background-color: #ccc;
}
button:hover {
background-color: #45a049;
}
#status {
margin-top: 10px;
font-size: 14px;
color: #666;
}
textarea {
width: 100%;
padding: 10px;
margin-top: 20px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
color: #333;
resize: none;
background-color: #f9f9f9;
}
let recognition;
let isRecording = false;
if ('webkitSpeechRecognition' in window) {
recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() {
isRecording = true;
document.getElementById('status').textContent = "Listening...";
document.getElementById('start-btn').disabled = true;
document.getElementById('stop-btn').disabled = false;
};
recognition.onend = function() {
isRecording = false;
document.getElementById('status').textContent = "Press the microphone button to start speaking.";
document.getElementById('start-btn').disabled = false;
document.getElementById('stop-btn').disabled = true;
};
recognition.onresult = function(event) {
let transcript = '';
for (let i = event.resultIndex; i < event.results.length; i++) {
transcript += event.results[i][0].transcript;
}
document.getElementById('transcription').value = transcript;
};
recognition.onerror = function(event) {
document.getElementById('status').textContent = "Sorry, there was an error recognizing your speech.";
};
} else {
alert("Speech Recognition API not supported in your browser.");
}
function startRecognition() {
recognition.start();
}
function stopRecognition() {
recognition.stop();
}
