The Advanced Javascript API

The first step is to register and get a login and password that you can use in the API calls. You can sign up for an account here. You can also use the account to login to the web site and monitor your account activity.

Lets start by taking a look at the code in the callback example.

To use speechapi advanced mode, you need to include three javascript files in your webpage. The first one contains the specechapi javscript, the second one is a standard way to embed a flash object (swfobject.js), the third one is jquery. The flash object is used to access the mircrophone from the browser and to stream audio to and from the browser.

<script type="text/javascript" src="http://www.speechapi.com/static/lib/speechapi-1.1.js"></script> <script type="text/javascript" src="http://www.speechapi.com/static/lib/swfobject.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Next you need to initialize the speechapi flash component and to establish a connection to the server.

Note that we are using the basic swfobject.js and we are using Dyanmic Publishing. A few other items worth pointing out here:

  • You must specify the url of the speechserver in a flashvar called speechServer.
  • The Id of flash component is "flashContent" in this case. Use this Id to palce the flash element in your page
  • The Alternate ID of the flash component is "myAlternateContent" in this case. Use this Id to palce the flash altenate content in your page
  • The setup method takes in 6 parameters: username, password, callback for recognition results, callback for tts completion, callback wen the flash component is ready amd finally the flash components Id.

  • 
        var flashvars = {speechServer : "rtmp://www.speechapi.com:1935/firstapp"};
        var params = {allowscriptaccess : "always"};
        var attributes = {};
        attributes.id = "flashContent";
        swfobject.embedSWF("http://www.speechapi.com/static/lib/speechapi-1.2.swf", 
                            "myAlternativeContent",
                            "215", "138", "9.0.28", false,flashvars, params, attributes);
        speechapi.setup("eli","password",onResult,
                        onFinishTTS, onLoaded, "flashContent");
    
    

    To enable recognition, use the setupRecognition method. Where as in basci mode you passed in the complete grammar in simple or JSGF format, in advacned mode you specify JSGF and the speechapi.consytactBrammar() method.

    
           function onLoaded() {
    		$(document).ready(function() {
    			speechapi.setupRecognition("JSGF",speechapi.constructGrammar());
    		});
    	}
    
    

    The following code snippet shows the recognition and tts callbacks. The recognition callback (onResult) receives the recognition results as a parameter. The result object contains the raw results in the result.text. In this example the callback displays results in a UI element on the page and then uses the text to speech api to repeat the results back to the user. Upon completion of the text to speech processing, you will recive a tts complete callback. In this case we are just alerting the user the tts is complete.

    
    	function onResult(result) {
    		speechapi.speak("you said, " + result.text, "male");
    		for (var k in result.ruleMatches) {
    			speechapi.processRule(result.ruleMatches[k]._rule,result.ruleMatches[k]._tag);
    		}
    	}
    
    
        function onFinishTTS() {
            alert("finishTTS");
        }   
    

    The most important element of this example is setting up the callback and the grammar segments. First lets look at the callback function. It is defined to recieve a text and a tag. All speech callback methods will receive these two parameters -- but you are free to do whatever you want with them. In this case we treat the tag as link id and click() it.

    Then we define the grammar for each link with the addJsgfGrammar method. It takes a jsgf grammar segment and the a callback. You can learn more about JSGF here.

    
    		// define generic grammar callback
    		var grammarCallback = function(text, tag) {
    			if (tag) {
    				$('a:contains("' + tag + '")').click();
    			}
    		}
    
    		// define grammar for each link
    		speechapi.addJsgfGrammar('(dog | dogs | doggy | doggys | doggies | puppy | puppys | puppies | puppydog | puppydogs) {dogs}', grammarCallback);
    		speechapi.addJsgfGrammar('(cat | cats | kitty | kittys | kittycat | kittycats) {cats}', grammarCallback);
    		speechapi.addJsgfGrammar('(tree | trees | forest | shrubbery) {trees}', grammarCallback);
    		speechapi.addJsgfGrammar('(horse | horses | stallion | stallions) {horses}', grammarCallback);
    		speechapi.addJsgfGrammar('(unicorn | unicorns) {unicorns}', grammarCallback);
    		speechapi.addJsgfGrammar('(rainbow | rainbows) {rainbows}', grammarCallback);
    		speechapi.addJsgfGrammar('(waterfall | waterfalls) {waterfalls}', grammarCallback);
    
    

    these are the links defined in the callback example. these links can be selected with your mouse or spoken based on the grammar segmenst specifeid above.

    <ul> <li><a class="displayInPage" href="http://www.google.com/images?q=dogs">dogs</a></li> <li><a class="displayInPage" href="http://www.google.com/images?q=cats">cats</a></li> <li><a class="displayInPage" href="http://www.google.com/images?q=trees">trees</a></li> <li><a class="displayInPage" href="http://www.google.com/images?q=horses">horses</a></li> <li><a class="displayInPage" href="http://www.google.com/images?q=unicorns">unicorns</a></li> <li><a class="displayInPage" href="http://www.google.com/images?q=rainbows">rainbows</a></li> <li><a class="displayInPage" href="http://www.google.com/images?q=waterfalls">waterfalls</a></li> </ul>

    Demos

    Check out our demos by going to http://www.speechapi.com/demos. Be sure to view the source.