May

22

How to use HTML 5 speech input

Getting users to fill in lots of forms can be frustrating so why not use speech to speed up the process? Google has recently implemented HTML 5 speech into its Chrome browser and other browser makers are set to follow.

To add speech to an input field use the attribute "x-webkit-speech" as well as "speech" (the official attribute is "speech" but it hasn't been used yet) as shown below.

<input type="text" speech x-webkit-speech />

The attribute "onspeechchange" (which behaves in a similar way to onchange, but is specific to speech) can be used to detect when a user has spoken into an input field.

<script type="text/javascript">
  function writeSpeech(speechInput)
  {
    alert('You said: '+ speechInput);
  }
</script>

...

<input type="text" speech x-webkit-speech 
onspeechchange="writeSpeech(this.value)" />

You can check weather the users browser supports speech input by using Javascript which is useful if you want your site to rely heavily on it.

if( document.createElement('input').webkitSpeech==undefined )
{
  //no speech support
}