Getting Started With HTML5 Web Speech API

If you don’t know about it yet, the HTML5 web speech API specification is now working on Google Chrome and partially in the Apple Safari browser(See the browser support status here). That means you can now develop voice-driven web applications. We hope that other browsers will start supporting this very soon as well. In this tutorial, I will explain how we can begin developing an application that uses this. I will also refer you to a small wrapper library with the easy-to-use abstraction I wrote recently.

Voice To Text API:

We can alternatively mention it as ‘Speech Recognition API’ as well. What it does is capture the user’s voice through the input system and convert it to text. So, there is a need for voice recognition technology here. This feature is currently supported only in the Google Chrome browser. By default, it uses Google’s voice recognition service. Here is a code example of implementing it:

var recognizer = new webkitSpeechRecognition();
recognizer.lang = "en";
recognizer.onresult = function(event) {
    if (event.results.length > 0) {
        var result = event.results[event.results.length-1];
        if(result.isFinal) {
            console.log(result[0].transcript);
        }
    }
};
recognizer.start();Code language: JavaScript (javascript)

The above code snippet will request permission from the user to allow input through microphone access. Then, it will capture the sound you talk to, send it to an external service for recognition, and get the result back inside the ‘onresult’ event handler. Thus, we can see the output in the browser’s console window.

This class definition also exposes an optional ‘serviceURI’ property, which you can use to define the service URL you like to use for voice recognition.

Text To Voice API:

Text-to-voice conversion is a simple way to play a given text in a robotic voice. Here is a simple code snippet for this:

var su = new SpeechSynthesisUtterance();
su.lang = "en";
su.text = "Hello World";
speechSynthesis.speak(su);Code language: JavaScript (javascript)

As you can see, it’s pretty straightforward. We need to pass the desired language and text to it, and it’s all set to play.

The Wrapper Library And Usage Example:

As I already experienced, some steps are obvious and can be made simple with a simple wrapper. Thus, to make your life easier, I started a small JavaScript library to ease the use of this API. Here is the GitHub link:

https://github.com/ranacseruet/webspeech

It’s also registered as a bower package too! So, if you are using Bower for front-end package management, you can run commands like:

$bower install webspeechCode language: PHP (php)

And you should be just fine!

Here is a very simple-to-use example:

<input id="text">
<button onclick="talk()">Talk It!</button>
<button onclick="listen()">Voice</button>
<script src="../bower_components/platform/platform.js"></script>
<script src="../src/webspeech.js"></script>
<script>
    var speaker = new webspeech.Speaker();
    var listener = new webspeech.Listener();
    function talk() {
        speaker.speak("en", document.getElementById("text").value);
    }
    function listen() {
        listener.listen("en", function(text) {
            document.getElementById("text").value = text;
        });
    }
</script>Code language: HTML, XML (xml)

Final Words:

Even Chrome for Windows has another issue: It doesn’t support continuously capturing voice; instead, you will have to allow it on the browser every time you want to say something. However, there is a workaround to get rid of this annoying access allowance: host your application on SSL. Then, only one-time access will work for all later times.

I hope this simple tutorial will help you get started with HTML5 web speech API easily and without much difficulty. If you are facing some issues, please let me know via comments. Happy coding 🙂