Check out my webpage http://scm.moodleace.com/sr.html.
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 http://scm.moodleace.com/sr2.html.
Say the words microsoft dot com and this is what you will get:
Next, try spelling the website microsoft.com 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 ...
- removed all blanks from the input data, and replaced them with nulls
- 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:
Here's what you can get:
Clicking on the Send button propels you to http://moodle.org.
For instructions on how to add Speech recognition to your Moodle site, surf over to Nicholas Walker's blog at http://adte.ca/2011/10/970/.
Happy Moodling, yeah?
Frankie Kam
P.S., you might be interested in this related post of mine: Virtual Student.
APPENDIX
You can download both sr1.html and sr2.html from Dropbox here.
Here's the code for sr1.html
<html>
<head>
<STYLE type="text/css">
a.blacklink:link {color: #000000;}
</STYLE>
<title>Speech Recognition</title>
<script type="text/javascript">
//Code by Frankie Kam
//http://moodurian.blogspot.com
//
function REDIRECT_RP()
{
UserSavedFile = String(document.Gui_RP.WebsiteName.value);
if(UserSavedFile == "google")
window.location = 'http://www.google.com';
else
window.location = 'http://www.bing.com';
}
</script>
</head>
<body onLoad="vision()">
<FORM name="Gui_RP" onsubmit="event.returnValue=false;return false;">
<input TYPE=text NAME="WebsiteName" VALUE="Websitename.com" 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();">
</form>
</body>
</html>
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 == "google.com" || InputText == "google")
window.location = 'http://www.google.com';
else
window.location = 'http://'+InputText;
}
//That's all folks!
Great Article!
ReplyDelete