Tutorial 51 Demo 1
Web Speech Synthesis API

Note that one or more of these demos may not work on your browser/OS combination...

Demo 1: Simple Example

Create a new SpeechSynthesisUtterance and speak it...


    var u = new SpeechSynthesisUtterance('You have reached your destination');
    speechSynthesis.speak(u);
  

Demo 2: Example with options

Create a new SpeechSynthesisUtterance with options and a callback


    var u = new SpeechSynthesisUtterance();
    u.text = 'Turn left at the next intersection';
    window.speechSynthesis.speak(u);
  

Demo 3: Get Voices

Fetch a list of the available voices


    var voices = window.speechSynthesis.getVoices();
    var text = '';
    for(var i = 0; i < voices.length; i++ ) {
      text += "Voice " + i.toString() + ' ' + voices[i].name + "<br>";
    }
    $('#voices').html(text);
  

Demo 4: Specify a Voice

Specify a different voice


    var u = new SpeechSynthesisUtterance();
    u.text = 'Take the second exit on the roundabout';
    voices = window.speechSynthesis.getVoices();
    u.voice = voices.filter(function(voice) { return voice.name == 'Google UK English Female'; })[0];
    window.speechSynthesis.speak(u);
  

Demo 5: More options

Decreased rate of speech and volume, increased pitch...

NOTE - not all options work with all voices


    var u = new SpeechSynthesisUtterance();
    u.text = 'You have driven right past your destination';
    u.lang = 'en-US';
    u.rate = 0.5;
    u.pitch = 1.5;
    u.volume = 0.5;
    var voices = window.speechSynthesis.getVoices();
    u.voice = voices.filter(function(voice) { return voice.name == 'Fred'; })[0];
    window.speechSynthesis.speak(u);