Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Speech recognition --- is there a way to set what the user is expected to say dynamically? (Using custom Grammars)

I am looking for a way to define what you expect the user to say in an <input> tag with the HTML 5 speech attribute set.
I know that you can specify a specific grammar to use via the grammar attribute, like this:
<input type="text" speech grammar="grammar.grxml" />

( see http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html )

but I was hoping for a way to make this dynamic, so that I can specify what I expect the user to say via javascript.

For example, if you had a dynamically generated list of items for a user to select from by speech, how would you specify that what they will say will most likely be one of those items?

P.S. I am testing this with Google Chrome, thus using the x-webkit-speech attribute instead of speech and likewise x-webkit-grammar instead of grammar.

like image 408
Stephen Avatar asked Mar 24 '12 03:03

Stephen


2 Answers

The grammar file could be dynamically generated using something like PHP, JSP, or your favorite web development language. The grammar file is fetched using HTTP so you could have something like this if you are using PHP:

<input type="text" speech grammar="grammar.php?some_var=foo" />

The PHP would dynamically create the grammar based on information passed in a query string or through stored session information and return it to the speech engine.

like image 149
Kevin Junghans Avatar answered Nov 12 '22 04:11

Kevin Junghans


I found a way to do it client-side, using a new html5 feature: blobs.

window.URL = window.URL || window.webkitURL;

var myGrammar = new Blob(["My custom grammar"], {
     type: 'text/xml Or whatever is the proper MIME type for grammars'});

var grammarUrl = window.URL.createObjectURL(myGrammar); 

myInput = document.getElementById("myInput");

myInput.grammar = grammarUrl;

This makes a url out of the grammar string, and then sets that url for our input element.

This way there is no need to make a server request, thus making it faster and less load on the server.

For more information on blobs, see this and this.

like image 45
Stephen Avatar answered Nov 12 '22 06:11

Stephen