In this article, we will be implementing a basic web application for speech to text conversion using JavaScript.
Speech Recognition
Speech recognition is a feature that gives us the ability to perform tasks using our spoken words as input. Speech recognition is gradually becoming a part of our lives in the form of voice assistants such as Alexa, Google Assistant, and Siri.
Speech recognition can be implemented in the browser using JavaScript Web Speech API. The Web Speech API enables the web app to accept speech as input through the device’s microphone and convert the speech into text by matching the words in the speech against the words in its vocabulary.
Along with Speech Recognition API, a number of closely related APIs are used for displaying results, grammar, etc. These results can then be used as input by other APIs for performing tasks.
Speech to text demo app is being used as an example here. The user just has to tap the start button on the screen and say the keyword and the webpage will display the word in the text.
Note : Currently, the Web Speech API is only fully supported by Chrome for desktop and Chrome for Android. The Speech Recognition interface exists in the Chrome browser’s window object as webkitSpeechRecognition.
Like any other web app, we need an application having the following files in its directory:
- The index.html file which contains the HTML code for the web app
- The style.css which contains the CSS styles used in the web app
- The index.js file containing the JavaScript code of the web app
- A web server for running the web app
Demo
Source Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Speech to text conversion using JavaScript</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
</head>
<body>
<div class="mycontainer">
<h1>Speech to text conversion using JavaScript</h1>
<div class="mywebapp">
<div class="input">
<textarea id="textbox" rows="6"></textarea>
</div>
<button id="start-btn" title="Start">Start</button>
<p id="instructions">Press the Start button</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
style.css
body {
background: #1e2440;
color: #f2efe2;
font-size: 16px;
}
button:focus {
outline: 0;
}
.mycontainer {
max-width: 500px;
margin: 0 auto;
padding: 150px 100px;
text-align: center;
}
.mywebapp {
margin: 50px auto;
}
#textbox {
margin: 30px 0;
}
@media (max-width: 768px) {
.mycontainer {
width: 85vw;
max-width: 85vw;
}
button {
margin-bottom: 10px;
}
}
script.js
var SpeechRecognition = window.webkitSpeechRecognition;
var recognition = new SpeechRecognition();
var Textbox = $('#textbox');
var instructions = $('instructions');
var Content = '';
recognition.continuous = true;
recognition.onresult = function(event) {
var current = event.resultIndex;
var transcript = event.results[current][0].transcript;
Content += transcript;
Textbox.val(Content);
};
recognition.onstart = function() {
instructions.text('Voice recognition is ON.');
}
recognition.onspeechend = function() {
instructions.text('No activity.');
}
recognition.onerror = function(event) {
if(event.error == 'no-speech') {
instructions.text('Try again.');
}
}
$('#start-btn').on('click', function(e) {
if (Content.length) {
Content += ' ';
}
recognition.start();
});
Textbox.on('input', function() {
Content = $(this).val();
})
Follow this video for complete guidance :
