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

Spoken Actions for the Web are Inevitable

DZone's Guide to

Spoken Actions for the Web are Inevitable

Speech recognition can already be implemented in Chrome

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.


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 above will stop recognition when you stop speaking. In order to do not stop recognition you need to set continuous flag to true. Additionally, this will treat every fragment of you speech as interim result, so you need to update onresult callback too:

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

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 is 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 coming to the browser, and you can not stop it. The question is when most of websites will add voice support. Check out voiceCmdr – a library that I blogged about earlier this year, which helps to add voice commands to your websites in very easy way. You can also check out website that can be navigated with voice commands – you can find available commands in my blog post. You can find entire logic for voice commands support in this file (lines: 38-103).

Based on a talk about Speech Recognition in the Browser at the Code Fellows in Seattle.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
speech recognition ,natural language processing ,chrome ,web design ,javascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}