Introducing the Speech Synthesis API

In the last couple of months we’ve seen API after API being released, many of which make life easier.

Today we’re going to focus on the Speech Synthesis API, which uses system libraries to speak, whatever you want, making the Web considerably more accessible.

Browser support

This API is fairly new, so not widely supported. Currently only Chrome Canary and Safari support it. (Safari supports it on desktop and mobile.)

So, we can play with the API, but it’s not production ready unless we have a good fallback.

A simple example

The simplest way to use this API is to pass a string to the SpeechSynthesisUtterance object and then use the speak method to have the computer say the string:

var message = new SpeechSynthesisUtterance(‘Hello from Developer Drive!’);
window.speechSynthesis.speak(message);

Taking a step forward

Sure, the first example here is fine, but it’s always worth digging a little deeper. In this case there are a handful of attributes we can pass to modify the SpeechSynthesisUtterance object:

  • Text: this is the simplest, and the one we’ve already used.
  • Lang: this attribute will specify the language the synthesis should use (if nothing is specified it falls back on the document default).
  • VoiceURI: specifies the voice and the synthesis service you want to use.
  • Volume: the volume of the speech, from 0 to 1.
  • Rate: the speed at which the voice will speak. Values of 0 to 10 are permissable, but 1 is normal, 2 is double speed, 3 is triple speed and so on, so that 10 would be far too fast.
  • Pitch: the pitch of the voice ranging from 0 to 2.

To demonstrate, we’ll set up a form to determine the text, rate, pitch and volume:

<input type=“text” id=“speech"/>

<label for=“volume”>Volume</label>
<input type=“range" max="1" min="0" step="0.1" value="1" id="volume">

<label for=“rate”>Rate</label>
<input type=“range" max="5" min="0" step="0.5" value="2.5" id="rate">

<label for=“pitch”>Pitch</label>
<input type="range" max="2" min="0" step="0.1" value="2" id="pitch">

<button id="talk">Speak</button>

So the first thing we need to do when it comes to the jQuery is to attach a click event to our talk button and then create a new instance of the SpeechSynthesisUtterance:

$("#talk").click(function() {
  var msg = new SpeechSynthesisUtterance();
});

After this is done we need to get the available voices, select the one we want to use and also set the voiceURI:

var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; 
msg.voiceURI = 'native';

After this is done we need to move on to the attributes that will rely on user input and for that we will need to get the values of each input in our page using the .val() jQuery method, starting with the volume :

msg.volume = $(‘#volume’).val();

The method is the same for all the other inputs we have:

  msg.rate = $('#rate').val();
  msg.pitch = $('#pitch').val();
  msg.text = $('#speech').val();

Now all we really need to do in order to wrap this little application up is to set the language attribute and in this case I will use plain US English and then use the speechSynthesis.speak method to have the computer say the text with the settings we passed:

msg.lang = 'en-US';
speechSynthesis.speak(msg);

And that’s about all we needed to create a simple application using the Speech Synthesis API, this is the full code:

$("#talk").click(function() {
  var msg = new SpeechSynthesisUtterance();
  var voices = window.speechSynthesis.getVoices();
  msg.voice = voices[10]; 
  msg.voiceURI = 'native';
  msg.volume = $('#volume').val();
  msg.rate = $('#rate').val();
  msg.pitch = $('#pitch').val();
  msg.text = $('#speech').val();
  msg.lang = 'en-US';
  speechSynthesis.speak(msg);
});

And you can also see a demo here.

Final thoughts

There are many ways in which this API can come very in handy in the future. For people with disabilities and when it comes to combining this API with the Web Speech API that converts speaking to text, the possibilities will be endless.

Have you used the Speech Synthesis API in a project? What uses do you envisage? Let us know in the comments.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress