tutorial_51_example_1.html

  <script>

    $(document).ready(function() {

      // Check whether the browser is capable of speech synthesis
      if (window.speechSynthesis != 'undefined') {

        // Basic demo
        $("#demo_1").on('click', function(e) {
          var u = new SpeechSynthesisUtterance('You have reached your destination');
          window.speechSynthesis.speak(u);
          e.preventDefault();
        });

        // Alternate syntax for basic demo
        $("#demo_2").on('click', function(e) {
          var u = new SpeechSynthesisUtterance();
          u.text = 'Turn left at the next intersection';
          window.speechSynthesis.speak(u);
          e.preventDefault();
        });

        // Fetch list of available voices
        $("#demo_3").on('click', function(e) {
          e.preventDefault();
          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);
        });

        // Specify a voice
        $("#demo_4").on('click', function(e) {
          var u = new SpeechSynthesisUtterance();
          u.text = 'Take the second exit on the roundabout';
          var voices = window.speechSynthesis.getVoices();
          u.voice = voices.filter(function(voice) { return voice.name == 'Google UK English Female'; })[0];
          window.speechSynthesis.speak(u);
          e.preventDefault();
        });

        // Apply rate/pitch/volume options - some voices ignore these options
        $("#demo_5").on('click', function(e) {
          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);
          e.preventDefault();
        });

      } else {
        alert("Sorry - the Speech Synthesis API is not available in your Browser");
      }

    });
  </script>


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

  <h2>Demo 1:  Simple Example</h2>

  <p>Create a new SpeechSynthesisUtterance and speak it...</p>
  <pre><code class='javascript'>
    var u = new SpeechSynthesisUtterance('You have reached your destination');
    speechSynthesis.speak(u);
  </code></pre>

  <input type="button" id="demo_1" value="Speak to Me">

  <h2>Demo 2:  Example with options</h2>

  <p>Create a new SpeechSynthesisUtterance with options and a callback</p>
  <pre><code class='javascript'>
    var u = new SpeechSynthesisUtterance();
    u.text = 'Turn left at the next intersection';
    window.speechSynthesis.speak(u);
  </code></pre>

  <input type="button" id="demo_2" value="Speak to Me">

  <h2>Demo 3:  Get Voices</h2>

  <p>Fetch a list of the available voices </p>
  <pre><code class='javascript'>
    var voices = window.speechSynthesis.getVoices();
    var text = '';
    for(var i = 0; i < voices.length; i++ ) {
      text += "Voice " + i.toString() + ' ' + voices[i].name + "&lt;br&gt;";
    }
    $('#voices').html(text);
  </code></pre>

  <input type="button" id="demo_3" value="Get Voices">

  <div id='voices'></div>

  <h2>Demo 4:  Specify a Voice</h2>

  <p>Specify a different voice</p>
  <pre><code class='javascript'>
    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);
  </code></pre>
  <input type="button" id="demo_4" value="Speak to Me">


  <h2>Demo 5:  More options</h2>

  <p>Decreased rate of speech and volume, increased pitch... </p>
  <p>NOTE - not all options work with all voices</p>
  <pre><code class='javascript'>
    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);
  </code></pre>

  <input type="button" id="demo_5" value="Speak to Me">