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 .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.

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/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.

• javascript
• html
• dynamic
• grammar
• speech-recognition

• 1 I would send the list to the server, server would return a link to grammar file containing the items, and I would replace the value of the gramman attribute with link I got from server. This should work, but I do not know the way to do it fully on client side. – Tadeck Commented Mar 24, 2012 at 3:50
• I didn't even know there was such a feature in HTML 5, looks pretty cool. +1 for the question – Jibi Abraham Commented Mar 24, 2012 at 7:52
• @JibiAbraham Yeah, and now there is a javascript api for it! Next thing I going to look into. updates.html5rocks./2013/01/… – Stephen Commented Feb 15, 2013 at 23:42

2 Answers 2

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.

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.