🎤 Creating a Simple Voice Assistant Using JavaScripts SpeechRecognition
🤖 What is SpeechRecognition?
SpeechRecognition is part of the Web Speech API, which allows web applications to recognize voice input and convert it to text. It is supported in Chrome and Edge, but not yet in Firefox or Safari.
To use it:
🧠 Basic Usage
Step 1: Check for browser support
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
alert("Your browser does not support Speech Recognition. Please use Chrome or Edge.");
}
Step 2: Create a recognition instance
const recognition = new SpeechRecognition();
recognition.lang = 'en-US'; // Language setting
recognition.interimResults = false; // Only final results
recognition.maxAlternatives = 1;
🛠️ Full Sample: A Simple Voice Assistant
Let’s build a simple voice assistant that listens for commands like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Voice Assistant</title>
<style>
body {
font-family: Arial;
text-align: center;
padding: 40px;
background: linear-gradient(to right, #e0f7fa, #e1f5fe);
}
#start-btn {
padding: 15px 30px;
font-size: 18px;
cursor: pointer;
background: #00bcd4;
color: white;
border: none;
border-radius: 8px;
}
#output {
margin-top: 30px;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<h1>🎙️ My Simple Voice Assistant</h1>
<button id="start-btn">Start Listening</button>
<p id="output">Say something...</p>
<script>
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
alert("Speech Recognition not supported. Try Chrome or Edge.");
} else {
const recognition = new SpeechRecognition();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
const output = document.getElementById('output');
const button = document.getElementById('start-btn');
button.addEventListener('click', () => {
output.textContent = "Listening...";
recognition.start();
});
recognition.onresult = function(event) {
const transcript = event.results[0][0].transcript.toLowerCase();
output.textContent = "You said: " + transcript;
handleCommand(transcript);
};
recognition.onerror = function(event) {
output.textContent = "Error: " + event.error;
};
function handleCommand(command) {
if (command.includes("hello")) {
speak("Hello, how can I assist you?");
} else if (command.includes("time")) {
const time = new Date().toLocaleTimeString();
speak("The time is " + time);
} else if (command.includes("google")) {
speak("Opening Google");
window.open("https://www.google.com", "_blank");
} else if (command.includes("joke")) {
speak("Why did the web developer go broke? Because he used up all his cache!");
} else {
speak("Sorry, I didn’t understand that.");
}
}
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
speechSynthesis.speak(utterance);
}
}
</script>
</body>
</html>
🔍 How It Works
💡 Ideas to Improve
🛑 Limitations