To implement speech-to-text functionality in JavaScript, you can use the Web Speech API, which is supported in modern web browsers. Here's a basic guide on how to use it:
Step 1: Check Browser Support
First, ensure that the browser supports the Web Hit Post Speech API. Most modern browsers like Chrome, Firefox, Edge, and Safari support it.
Step 2: HTML Setup
Create an HTML file (index.html
) with a minimal setup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speech to Text</title>
</head>
<body>
<button id="startButton">Start Recording</button>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>

Create a JavaScript file (script.js
) to handle speech recognition:
const startButton = document.getElementById('startButton');
const output = document.getElementById('output');
// Check if browser supports SpeechRecognition
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.continuous = true; // Continuous speech recognition
recognition.lang = 'en-US'; // Set the language
recognition.onstart = () => {
output.textContent = 'Listening...';
};
recognition.onerror = (event) => {
output.textContent = 'Error occurred in recognition: ' + event.error;
};
recognition.onresult = (event) => {
const transcript = event.results[event.results.length - 1][0].transcript;
output.textContent = 'You said: ' + transcript;
};
startButton.addEventListener('click', () => {
recognition.start();
});
} else {
output.textContent = 'Speech recognition not supported in this browser';
}
How It Works:
- The script checks if the
SpeechRecognition
object is available in the browser.
- If supported, it creates a new
SpeechRecognition
object.
- When the start button is clicked, it starts listening for speech.
- Once speech is recognized, the
onresult
event is triggered, and the recognized text is displayed.
Running the Application:
- Open
index.html
in a modern browser.
- Click on the "Start Recording" button.
- Speak into the microphone, and the recognized text will be displayed on the page.
Notes:
- Permissions: Modern browsers will ask for permission to access the microphone when you start recording.
- Continuous Recognition: In this example, continuous speech recognition is enabled, meaning it will keep listening until stopped explicitly or an error occurs.
Remember to run this code on a web server to avoid any cross-origin issues. You can use simple Python's HTTP server (python -m http.server
) or any other server of your choice.