How To Add Speech Recognition To Your Website

How To Add Speech Recognition To Your Website

In 1952, the Bell laboratories designed the first ever speech recognition system called the ‘Audrey system.’ It focused on numbers, not words, means it could recognize when digits are spoken aloud in a single voice with an accuracy of 90%. Ten years later, in 1962, IBM came up with the ‘Shoebox’ which recognized and responded to almost 16 words in English. The advancement saw SIRI, Google assistant and Alexa on its way. 

The speech recognition technology is being integrated into smartphones widely. Even mobile app development companies make sure that their apps have a speech recognition system as this accentuates the user experience these days. Integrating this system into the website is recently witnessing an unprecedented surge. We have listed some of the points which will make you capable of adding speech recognition to your website too with the help of a few lines of code. 

Google Cloud Speech-to-Text

Google Cloud Speech- to- Text converts audio to text using an easy to use API. This API recognizes over 120 languages to support its massive user base. Transcribing audio from call centers, voice command-and-control services and much more is possible now. This technology can also process real-time streaming or pre-recorded audios on demand. 

Some of the services Google offers in the Speech- to- Text service

Integrating this service in your websites enables the user to give commands just by saying it. Everyday technology is coming up with ideas which make the lives of users more comfortable and hassle-free. 

How To Add Speech Recognition to Your Website

Adding the code below to your website will enable voice recognition.

<!-- CSS Styles -->


 html, body {     

display: flex;     

align-items: center;   

 justify-content: center; 

background-color: lightblue;


.record {   

position: relative;    

width: 246px;    

display: inline-block;  


.record input {


border: 0; 

width: 240px; 

display: inline-block; 

height: 30px;

.record img {       

float: right;    

width: 25px;   

height: 25px;    

border: none;    

position: absolute;    

right: 7px;    

top: 3px;


.container {    

display: inline-block; 

text-align: center;  

h1 {    

font-family: constantia;  



<!DOCTYPE html>



<title>Voice Recognition: Mindster</title>



<!-- Search Form -->  

<div class="container">    

<h1>Voice Recognition in HTML</h1>

<div class="record">

<form id="speak-form" method="get" action="">          <input type="text" name="q" id="transcript" placeholder="Speak" />          <img onclick="startRecording()" src="" />       






<!-- HTML5 Speech Recognition API -->

<script>  function startRecording() {   

if (window.hasOwnProperty('webkitSpeechRecognition')) {     

var recognition = new webkitSpeechRecognition(); 

recognition.continuous = false;   

recognition.interimResults = false;  

recognition.lang = "en-US";


recognition.onresult = function(e) {       

document.getElementById('transcript').value = e.results[0][0].transcript;      




recognition.onerror = function(e) {      






Above image describes how the screen will look like. You can click on the microphone icon and start speaking. The voice will be instantly converted into digital signals by the ADC(Analog to Digital Converter) and will be searched online for results.

There are some major security concerns while integrating speech recognition to your websites. Some of them are listed below:

  • Once the permission is granted to the microphone to record, there is a possibility that your voice to be recorded anywhere anytime. So make sure that your microphone is blinking while being recorded.
  • Speaking out passwords possesses a threat of security
  • Eavesdropping to your speeches is yet another security threat. Malicious websites may use this data to manipulate things.

Future of Speech Recognition

Speech recognition is not yet harnessed into fullness. Once the technology is in its full fledge and is integrated with AI and IoT the phase of the earth will witness another significant transformation. Many Sci-Fi films depict the future as highly technical and sophisticated. The growth in technology proves that such a world is not only possible but will unfurl itself soon enough. 

The concept of ‘ambient computing’ is gaining popularity. People and their lives are becoming smart and fast. With each innovation, lives get more vivid. The growth of smart speaker usage has grown manifolds according to the recent surveys. 

When the smart speakers are equipped with technology to store daily schedule and when they start being a part of your lives is not so far away. Voice is the new wave. It is transforming smartphones and taking the web into an era where technology rules. Humans are evolving to be techno sapiens. 

However, technology always presents one or another bug in between. So depending too much on the artificial intelligence is not advised to be wise. Movies like ‘Her’ and ‘Terminators’ and even ‘Wall E’ depicts how technology may help as well as break humans. Humans tend to trust their creation rather than their instincts at times. So it is always better to depend on the human mind instead of the tech brains. Progress is always appreciated, and the technology is offering it in an unprecedented momentum. Some studies say that the world we know now has already advanced ten years in technology. Depend on technology wisely, and it will make lives cooler and smarter.

Author Bio: Premjith leads the Digital Marketing team at Aufait Technologies, a top notch SharePoint Solution Provider in India. With his 4 valuable years of experience in online marketing, he helps clients expand their online presence and mushroom novel business ideas.

App Development Agency 3 years ago
Hi! Just describing here about the best App Development Agency in Delhi NCR. Innovatia is the best Mobile App Development Agency in Delhi NCR. For more information: App Development Agency
App Development Agency 3 years ago
Mike Ca Jordan 2 years ago
European Union (the United Kingdom and Ireland are part of their own separate agreement called (and therefore do not operate there Schengen rules even if they are both part of the European Union (it should also be noted that the Schengen area also includes non-EU countries).

Leave a Reply