To add speech recognition and voice search to a website using JavaScript, you can use the Web Speech API, which is a built-in browser feature that allows developers to access the microphone and convert speech to text.
Here’s an example of how to use the Web Speech API to add voice search to a website:
First, create an HTML form with a text input field, a button to initiate the speech recognition and a button to stop the speech recognition.
<!DOCTYPE html>
<html>
<head>
<title>Creating a voice search in JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<input type="text" id="search-input" placeholder="Search...">
<button type="button" id="start-button">Start</button>
<button type="button" id="stop-button">Stop</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Styling the markup with CSS (optional).
.container {
width: 500px;
margin: 10px auto;
background-color: rgb(235, 235, 235);
padding: 20px;
border-radius: 5px;
font-size: 18px;
}
#search-input{
padding: 7px;
border: 1px solid rgb(111, 111, 111);
width: 300px;
border-radius: 5px;
font-size: 18px;
}
button {
padding: 10px 0;
border: none;
margin-left: 5px;
border-radius: 5px;
color: rgb(255, 255, 255);
font-weight: bold;
text-transform: uppercase;
width: 80px;
transition: all 0.5s;
}
button:hover {
cursor: pointer;
opacity: 0.8;
}
#start-button{
background-color: rgb(13, 156, 0);
}
#stop-button{
background-color: rgb(156, 34, 0);
}In the JavaScript file, check if the browser supports the Web Speech API by checking for the existence of the webkitSpeechRecognition object:
if ('webkitSpeechRecognition' in window) {
// Web Speech API is supported
} else {
// Web Speech API is not supported
}
If the Web Speech API is supported, create a new instance of the webkitSpeechRecognition object and add event listeners for the result and end events:
const recognition = new webkitSpeechRecognition();
recognition.lang = 'en-US';
recognition.interimResults = true;
recognition.addEventListener('result', function(e) {
// Get the transcript of the speech
const transcript = e.results[0][0].transcript;
// Set the value of the text input field to the transcript
document.getElementById("search-input").value = transcript;
});
recognition.addEventListener('end', recognition.start);
Add a click event listener to the start button that starts the recognition session when clicked:
document.getElementById("start-button").addEventListener("click", () => {
recognition.start();
});Add a click event listener to the stop button that stops the recognition session when clicked:
document.getElementById("stop-button").addEventListener("click", () => {
recognition.stop();
});Next, you can use the transcript value in a search function or AJAX call to the server to return search results to the page.
function search(){
const searchTerm = document.getElementById("search-input").value;
// call ajax function to send searchTerm to the server and fetch search results
}It is important to note that the Web Speech API may not be able to recognize all languages or dialects. If you are planning to support a large number of languages, it is a good idea to check if the API is able to recognize the selected language by testing it before using it in production.
It’s also worth noting that the speech recognition model that the Web Speech API uses will also play a role in how well it can understand different languages. If you want to improve the recognition for different languages, you could use a third-party speech recognition service such as Google Speech-to-Text, which can support a wide range of languages and dialects.
Below is the complete JavaScript code of the file.
if ('webkitSpeechRecognition' in window) {
const recognition = new webkitSpeechRecognition();
recognition.lang = 'en-US';
recognition.interimResults = true;
recognition.addEventListener('result', (e) => {
// Get the transcript of the speech
const transcript = e.results[0][0].transcript;
// Set the value of the text input field to the transcript
document.getElementById("search-input").value = transcript;
document.getElementById("search-text").innerHTML = transcript;
});
recognition.addEventListener('end', recognition.start);
document.getElementById("start-button").addEventListener("click", () => {
recognition.start();
});
document.getElementById("stop-button").addEventListener("click", () => {
recognition.stop();
});
function search(){
const searchTerm = document.getElementById("search-input").value;
// call ajax function to send searchTerm to the server and fetch search results
}
} else {
// Web Speech API is not supported
alert("Web Speech API is not supported");
}
No Comments
Leave a comment Cancel