Speech Synthesis API

In the example above we have two elements on the page a button and a p element that I am using to display information to give some feedback.

<p id="information"></p>    
<button id="button">Speak</button>

To test that the browser is capable of supporting notifications I check to see if Notification appears on the window object. I then give the user a little feedback about support and I enable/disable the button.

if (!('speechSynthesis' in window)) {
    document.getElementById('information').innerText = 'Speech Synthesis is not supported';
    document.getElementById('button').disabled = true;
else {
    document.getElementById('information').innerText = 'Good news Speech Synthesis is supported in your browser';
    document.getElementById('button').disabled = false;

To start text to speech I first handle the button click.

document.getElementById('button').addEventListener('click', function () {// code goes here})

Next I set up a new Utterance, I pass what I would like to say to the SpeechSynthesisUtterance when I create one.

var utterance = new SpeechSynthesisUtterance("Hello and Welcome to thebeebs dot co dot uk");

To actually get the browser to speak the utterance, I call the speak method of the speechSynthesis object. I pass in the utterence I created in the previous line.


Finding Your Voice

Each browser will have a different set of voices to choose from to get a list all we do is call the getVoices method of the speechSynthesis object.

var voices = window.speechSynthesis.getVoices();

You will get an array of speechSynthesisVoiceobjects from the this Method. Each one of the objects has the following properties:

  • name : A human-readable name that describes the voice.
  • voiceURI : A URI specifying the location of the speech synthesis service for this voice.
  • lang : The language code for this voice.
  • default : Will be true for the default voice used by the browser.
  • localService – The API can use a local or remote services to handle speech synthesis. It is true if the voice is local.

Further Customisation

The lang attribute gives you the ability to specify the language of the text. This will default to the language of the HTML document.

utterance.lang = 'en-GB';

The volume property allows you to adjust the volume of the speech. A float value between 0 and 1 should be specified here. The default is 1.

utterance.volume = 1;

The rate attribute defines the speed at which the text should be spoken. This should be a float value between 0 and 10, the default being 1.

utterance.rate = 1;

The pitch attribute controls how high or low the text is spoken. This should be a float value between 0 and 2, with a value of 1 being the default.

utterance.pitch = 1;

Published by thebeebs

Martin works for Oracle as a Developer Evangelist. He’s been a developer since the late 90s and loves figuring out problems and experimenting with code. Read more