Web Speech API Experimentation

Converting the Natural Language to Database Query project over to Javascript requires the implementation of the Web Speech API in a single Javascript file. I will discuss the steps taken for the integration in this blog post. Kinda unorthodox but here’s a reference before the content, if you want to experiment on Web Speech API using the official guide.

First we check if the API is available with the browser using the following code

if (!(‘webkitSpeechRecognition’ in window)) { upgrade(); }

This checks for the webkitSpeechRecognition availability and if unavailable, asks the user to upgrade the browser. Next, accessing the API using a Javascript object.

var recognition = new webkitSpeechRecognition();

Clearly this creates a recognition named object for the API using which we can access its functionality. Here’s the definition of the object received in the above statement.

SpeechRecognition {}

  • continuous:false
  • grammars:SpeechGrammarList
  • interimResults:false
  • lang:“”
  • maxAlternatives:1
  • onaudioend:null
  • onaudiostart:null
  • onend:null
  • onerror:null
  • onnomatch:null
  • onresult:null
  • onsoundend:null
  • onsoundstart:null
  • onspeechend:null
  • onspeechstart:null
  • onstart:null

Most of the attributes and the functions are clear about their role in their own name. But here’s a reference just in case.

So now let’s get the transcript for the recognized speech from the API.

recognition.onresult = function(event) {console.log(event.results[0][0].transcript);};

Then start the recognition using the following code.


PS: You’ll have to authorize the use of microphone by the webpage.