The Speech Synthesis API: an introduction

The Speech Synthesis API: an introduction
by Janeth Kent Date: 05-02-2014 javascript programming webdev api

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

NOTE: We have to consider that the API is fairly new, so not widely supported. The Speech Synthesis API is supported in Chrome 33+ and Safari. At the time of writing, the stable channel of Chrome is at version 32 so you will need to be running either the Chrome Dev channel or Chrome Canary to see this in action.

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 World!’);  


Now, let's dig a little deeper to see how we can pass the attributes 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.speakmethod 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.



Original post by Sara Vieira

by Janeth Kent Date: 05-02-2014 javascript programming webdev api hits : 12006  
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.


Related Posts

Strings in JavaScript: What they are and how to use them

In this tutorial we are going to explain what strings are and how they are used in JavaScript. The tutorial is intended for people who are learning to program in…

Dates in local format with Javascript

In the articles we have about dates in JavaScript we were missing one about how to create dates in local format with JavaScript. That is to say, being able to…

Formatting hours in Javascript

Continuing with the set of articles that talk about internationalisation elements, like the previous one where we talked about relative dates in JavaScript, we will see in this one how…

Request data with prompt in JavaScript

After having published several articles about how to manipulate arrays and dates, today I will publish a post that some of you will find too basic and others will find…

Relative dates in JavaScript

One of the interesting things about the internationalisation library represented in the Int object is the handling of relative dates in Javascript. This handling allows us to represent a date…

How to access webcam and grab an image using HTML5 and Javascript

We often use webcams to broadcast video in real time via our computer. This broadcast can be viewed, saved and even shared via the Internet. As a rule, we need…

The JavaScript forEach loop

We have already talked about how to handle some of loops  types in Javascript including for, for-in and for-off loops. In the case of today we are going to see how…

What are React Hooks and what problems they solve

Working with React, - and before the release of Hooks in version 16.8 -  there was always the possibility to create components in three different ways based on a number of…

Flattening arrays in JavaScript

When we are handling arrays that are arrays or have multiple dimensions it can be very useful to know how to flatten arrays in JavaScript. That is to say, to…

How to populate an array with random numbers in JavaScript

Some of you might think that what we explained in the article on how to populate an array with numbers, apart from the didactic part, would not have much applicability…

How to populate an array with numbers in JavaScript

Populate an array with numbers in JavaScript The first step is to initialise the array. So today we are going to see a simple way to do it and see how…

Top Javascript Libraries and Frameworks Part 2

What are JavaScript frameworks?   JavaScript frameworks are application frameworks that allow developers to manipulate code to meet their particular needs. Web application development is like building a house. You have the option…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration