Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Speech Recognition in the Browser

DZone's Guide to

Speech Recognition in the Browser

Here are a few code snippets you can use to easily add speech recognition to your website with pure JavaScript.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Last Thursday I had the pleasure of giving a talk about Speech Recognition in the Browser at the Code Fellows in Seattle.

Many people were surprised how easy it is to add speech recognition to your website with pure JavaScript. So, I thought I would share a few code snippets here. They only work in Chrome so far.

Recognizing Speech

This is how you can translate speech to text:

var sr = new webkitSpeechRecognition();
sr.onresult = function (evt) {
    console.log(evt.results[0][0].transcript);
}
sr.start();

You can also get the confidence level of the result:

var sr = new webkitSpeechRecognition();
sr.onresult = function (evt) {
    console.log(evt.results[0][0].transcript, evt.results[0][0].confidence);
}
sr.start();

You can get interim results:

sr.interimResults = true;// false by default
sr.onresult = function(evt) {
for (var i = 0; i < evt.results.length; ++i) {
console.log(evt.results[i][0].transcript);
};
};

Or different alternatives of recognized speech:

sr.maxAlternatives = 10;// default = 1
sr.onresult = function(evt) {
for (var i = 0; i < evt.results[0].length; ++i) {
console.log(evt.results[0][i].transcript);
}
}

You can set a language, e.g., to Polish:

sr.lang = 'pl-PL'

All of the above will stop recognition when you stop speaking. In order to not stop recognition you need to set continuous flag to true. Additionally, this will treat every fragment of speech as an interim result, so you need to update the onresult callback too:

sr.continuous = true;// false by default
sr.onresult = function(evt) {
console.log(evt.results[evt.results.length-1][0].transcript);
};

The Speech Recognition object has other callbacks (than onresult) that you can take advantage of:

sr.onstart = function() { console.log("onstart"); }
sr.onend = function() { console.log("onend"); }
sr.onspeechstart = function() { console.info("speech start"); }
sr.onspeechend = function() { console.info("speech end"); }

Emitting Speech

var msg = new SpeechSynthesisUtterance('Hi, I\'m Jakub!');
speechSynthesis.speak(msg);

You can also change the speaker voice:

var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params

There are also other options you can set:

msg.volume = 1; // 0 to 1
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';

msg.onend = function(e) {
console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

Summary

Speech is on its way to the browser, and there's no stopping it. The question is when will the majority of websites add voice support. Check out voiceCmdr, a library that I blogged about earlier this year, which provides a simple way to add voice commands to your websites. You can also check out this website that can be navigated with voice commands–you can find available commands in my blog post. You can find the entire logic for voice commands support in this file (lines: 38-103).

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
javascript ,speech recognition ,webkit

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}