Speech Synthesis API: My Browser talks !

The Web Speech API adds to JavaScript:

  • Voice recognition (speech to text)
  • Speech synthesis (text to speech)

Here we will talk about Speech synthesis (text to speech)

Let’s start with a basic code:

Step 1: Write this Javascript code in a html file

var message = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(message);

Step 2: Open the file in chrome

Let’s alter some of the settings and see what happens:

Step 1: Write this Javascript code in a html file

var message = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
message.voice = voices[10]; // Note: some voices don't support altering params
message.voiceURI = 'native';
message.volume = 1; // 0 to 1
message.rate = 1; // 0.1 to 10
message.pitch = 2; //0 to 2
message.text = 'Hello World';
message.lang = 'en-US';

message.onend = function(e) {
  console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(message);

Step 2: Open the file in chrome

Detection if browser supports

Web browsers may support each portion of the Web Speech API separately it is better feature detect each feature separately, Like here we detect if browser supports Speech Synthesis:

if ('speechSynthesis' in window) {
 // Synthesis support. Make your web apps talk!
}

Try it yourself and Explore endless creative ideas for your applications.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s