Don't type your search queries -- speak them!
Create a web page to search the internet by voice.
Any text editor.
A web server that you have access to save files on. The Web Speech API only works for files served via https:// or http:// and not file:///
One way to set up a web server is by using Google Drive as follows:.
Create a new folder in Google Drive.
Share the folder so that it is public viewable.
Put the file "codelab1.html" in that folder, make sure it is also public viewable.
Navigate into the folder containing "codelab1.html", the URL will end with a long unique string after the last "/".
Copy and paste that long unique string to the end of this URL www.googledrive.com/host/ and open it in Chrome. For example: https://googledrive.com/host/0B1jg9xNg9UTqQXZRQ1p3UGRBOGM
Open "codelab1.html" in your text editor and also open it in your Chrome browser using https:// or http:// but not file:///
Open Chrome's developer console Ctrl-Shift-C or Cmd-Shift-C.
Click the gear icon in the bottom-right corner of the console. Check the box "Disable cache (while DevTools is open)" and close the settings (but keep the console window open).
Your development cycle will be:
Edit the "codelab1.html" file with your favorite text editor.
Save it to your web server.
Reload the Chrome browser tab containing "codelab1.html".
Test your app. Look at your Javascript console for errors (Ctrl-shift-J, cmd-alt-J to see the Javascript console.) If there are problems, edit and save and reload.
When you're happy with your work, move on to the next step. If you get stuck, see the Troubleshooting section below.
Look at "codelab1.html" in your text editor. You'll see that it's a form with an input field. When the form is submitted, it sends the input text and gets a search result.
Test it. Open the "codelab1.html" page in Chrome. Type something into the input field then press the "Enter" key. After viewing the search results, click Chrome's "Back" button and you're back on the page you started with.
In your text editor, look for comments like the following. These show where to put the following code:
<!-- CODELAB 1.1: Create new WebSpeechRecognition object HERE -->
The following script does several important things.
Includes the "webspeech.js" library, which implements a WebSpeechRecognition object, and provides several helper functions implemented within that object.
Creates that WebSpeechRecognition object.
Configures that WebSpeechRecognition object to write its final recognition results to the "input_field".
Add this script at the end of the "codelab1.html" file.
<script src="webspeech.js"></script>
<script>
var reco = new WebSpeechRecognition();
reco.finalResults('input_field');
</script>
You can find more details by looking at webspeech.js and reading its comments.
Create a button that looks like a microphone. When clicked, it calls the recognition object's toggleStartStop function. Put the following HTML below the <form> element.
<button onclick="reco.toggleStartStop()">
<img id="status_img" src="mic.gif" alt="Start">
</button>
Test it. Refresh the page in Chrome, click the button, and say something. If you see a permissions prompt at the top of the page, click "Allow", and then say something. The speech recognition results should appear in the input field.
If your pages are served by https:// you will only see this permissions prompt once per domain. If using http:// it will keep popping up.
Let's add status and instructions to assist the user.
Add a <div> element to display status information. Put this in the HTML above the <form> element.
<div id="status">
</div>
Also, add the following to refer to this new <div> element so that status text can be written to it. Put this line just below your code that creates the "new WebSpeechRecognition()" object.
reco.statusText('status');
Test it. Refresh the page and you should see a status line that changes when you click on the microphone.
Let's provide even more feedback for the user. Add the following to refer to the button's image element so that status changes can update the image. Put this line just below your code that creates the "new WebSpeechRecognition()" object.
reco.statusImage('status_img');
Test it. Refresh the page in Chrome. You should see a microphone instead of the button. Click on the microphone to start recognition.
Rather than just showing the speech recognition results, it should automatically perform the search after a successful recognition.
Add a callback function that runs when recognition is complete. This code checks to see if any results were returned, and if so, submits the form. Add this code at the bottom of the file but before the </script> tag.
reco.onEnd = function() {
if (reco.final_transcript != '') {
input_field.form.submit();
}
};
Test it. Refresh the page, click on the microphone and say something. It should automatically return search results.
The Web Speech API specification are the fundamental building blocks implemented in Chrome.
In this codelab, we are using a wrapper script webspeech.js which provides several helper functions implemented within the recognition object. You can use the built-in functionality of webspeech.js, or overwrite most of the functions and attributes to customize the way it works. Alternatively, you can study webspeech.js to learn how to access the Web Speech API directly, or read this Tutorial.
Use view-source to ensure that the page you're testing includes the changes you just made. If not:
Refresh the page.
Ensure you have "Disable cache (while DevTools is open)" and Chrome's console window is open.
Some web servers take a while to propagate changes, so patience and another refresh may be required.
If you run into problems getting any of the steps to work properly, check Chrome's developer console. If any errors are listed, track them down. Alternatively, use Chrome's rich debugging tools, or add window.console.log('test'); statements at key spots in your code to see progress and/or display values.
You can also peek at codelab1solution.html, which contains the complete solution for this codelab.
This Codelab by Glen Shires. Visit me on Google+!