Speech Synthesis API : Making your web apps talk

The Web Speech Synthesis API allows your web apps to convert page text or any other predefined or dynamic text to be rendered to speech. Although currently supported only in Chrome 33, the api enables you to add nice accessibility support to your web apps. However, I’m hard-pressed to find a suitable application for the use of it, besides maybe online games and browser slideshows with background commentary. A demo is given below.


(Note, will only work in Chrome >= 33)



Try different kinds of strings in the above text box, e.g.

98565321700
Hello World
9th March 2014
21:30 pm
Au revoir

Using the API

Using the speech API does not require you to add any external JavaScript files as it is built in the browser. A simplest usage is shown below. This renders the given text into speech.

<script type="text/javascript">
var speechMessage = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(speechMessage);
</script>

Or a shorter version of above.

<script type="text/javascript">
speechSynthesis.speak(new SpeechSynthesisUtterance('Hello World'));
</script>

The SpeechSynthesisUtterance takes various attributes which can control the rendered speech. For example, the API allows you to set different voices for the speech (male, female). You can get a list of supported voices in the browser using the following.

speechSynthesis.getVoices().forEach(function(voice) {
  console.log(voice.name);
});

On my Chrome browser it returns the following.

Google US English
Google UK English Male
Google UK English Female
Google Español
Google Français
Google Italiano
Google Deutsch
Google 日本人
Google 한국의
Google 中国的
native

Now you can change the default voice by changing the appropriate option. (Sadly on Windows there is some inconsistency on changing the voices)

var voices = window.speechSynthesis.getVoices();
var speechMessage = new SpeechSynthesisUtterance();
speechMessage.voice = voices[1];
speechMessage.text  = 'Hello World';
 
speechSynthesis.speak(speechMessage);

Events

The API triggers various events during the speech rendering, which you can use to integrate with your app.

peechMessage.onstart = function(e) {
  console.log('Started speaking');
};
 
speechMessage.onend = function(e) {
  console.log('Finished speaking');
};