Lesson 1: Search by voice

Don't type your search queries -- speak them!

Goal

Create a web page to search the internet by voice.

You'll need

One way to set up a web server is by using Google Drive as follows:.

  1. Create a new folder in Google Drive.

  2. Share the folder so that it is public viewable.

  3. Put the file "codelab1.html" in that folder, make sure it is also public viewable.

  4. Navigate into the folder containing "codelab1.html", the URL will end with a long unique string after the last "/".

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

Setup

Your development cycle

Your development cycle will be:

  1. Edit the "codelab1.html" file with your favorite text editor.

  2. Save it to your web server.

  3. Reload the Chrome browser tab containing "codelab1.html".

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

  5. When you're happy with your work, move on to the next step. If you get stuck, see the Troubleshooting section below.

Do it now

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

1.1 Add the basic script.

The following script does several important things.

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.

1.2 Add button to start / stop recognition.

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.

1.3 Add status text.

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.

1.4 Change the microphone icon button to indicate state.

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.

1.5 Submit the form.

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.

How it works

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.

Troubleshooting

Use view-source to ensure that the page you're testing includes the changes you just made. If not:

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.

Next up: Lesson 2


This Codelab by Glen Shires. Visit me on Google+!