Sunday, October 9, 2011

Speech recognition for Moodle with Google Chrome

Did you know that Google Chrome version 11 or upwards can add Automated Speech Recognition capability to your website? Many thanks to Nicholas Walker for highlighting this cool feature to me.

Check out my webpage

At the moment, this only works with Google Chrome 11 or above:
click on the microphone icon on the far-right of the text input box.

Then speak the words Google into your microphone.

Click the Send button. See what happens?
Next try the link again and this time, speak some other word and click the Send button.

Here's my Youtube video of the above so far.

And now for something slightly different: Check out website

Say the words microsoft dot com and this is what you will get:

Next, try spelling the website in a steady, natural speed: m i c r o s o f t
followed by the uttered word dot 
followed by the spelt letters c o m 
Here's what you can get:

Click the Send button and you will be redirected to the homepage of the Redmond giant.

Here's a second Youtube video on what I have explained so far.

If you examine the Javascipt code found inside sr2.html, you will notice that I ...

  1. removed all blanks from the input data, and replaced them with nulls
  2. replaced any substring "dot" with a full stop "."

Next, try say in a steady, natural speed, the words: moodle dot org
Here's what you can get:

Clicking on the Send button propels you to

For instructions on how to add Speech recognition to your Moodle site, surf over to Nicholas Walker's blog at

Happy Moodling, yeah?
Frankie Kam

P.S., you might be interested in this related post of mine: Virtual Student.


You can download both sr1.html and sr2.html from Dropbox here.
Here's the code for sr1.html


<STYLE type="text/css">
a.blacklink:link {color: #000000;}

<title>Speech Recognition</title>

<script type="text/javascript">
//Code by Frankie Kam

function REDIRECT_RP()
 UserSavedFile = String(document.Gui_RP.WebsiteName.value);
 if(UserSavedFile == "google")
    window.location = '';
    window.location = '';

<body onLoad="vision()">
<FORM name="Gui_RP" onsubmit="event.returnValue=false;return false;">
<input TYPE=text NAME="WebsiteName" VALUE="" ALT="Website name" title="Website name" SIZE=44 MAXLENGTH=120 style="width:184;font-family:Tahoma;font-size:10pt;background-color: #F9FB8E;" x-webkit-speech>
<input TYPE=button VALUE="Send" STYLE="width:46" onClick="REDIRECT_RP();">

And the code for sr2.html is almost identical, except for the REDIRECT_RP() function's extra code: 

function REDIRECT_RP()
 var InputText = String(document.Gui_RP.WebsiteName.value);
 //Replace any blanks with null.
 InputText = InputText.replace(/ /g,'');
 //Replace the word "dot" with .
 InputText = InputText.replace("dot",'.');
 if(InputText == "" || InputText == "google")
    window.location = '';
    window.location = 'http://'+InputText;

//That's all folks!

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!

Ratings and Recommendations by outbrain