HTML5 Standard SpeechRecognition

According to this standard information, HTML5 web pages has internal standard support of voice recognition through JavaScript functions:

Speech Recognition Examples

Using speech recognition to fill an input-field and perform a web search.

Example 1

            
  <script type="text/javascript">
    var recognition = new SpeechRecognition();
    recognition.onresult = function(event) {
      if (event.results.length > 0) {
        q.value = event.results[0][0].transcript;
        q.form.submit();
      }
    }
  </script>

  <form action="http://www.example.com/search">
    <input type="search" id="q" name="q" size=60>
    <input type="button" value="Click to Speak" onclick="recognition.start()">
  </form>
            
          

Using speech recognition to fill an options list with alternative speech results.

Example 2

            
    <script type="text/javascript">
      var recognition = new SpeechRecognition();
      recognition.maxAlternatives = 10;
      recognition.onresult = function(event) {
        if (event.results.length > 0) {
          var result = event.results[0];
          for (var i = 0; i < result.length; ++i) {
            var text = result[i].transcript;
            select.options[i] = new Option(text, text);
          }
        }
      }

      function start() {
        select.options.length = 0;
        recognition.start();
      }
    </script>

    <select id="select"></select>
    <button onclick="start()">Click to Speak</button>
            
          

Using continuous speech recognition to fill a textarea.

Example 3

            
  <textarea id="textarea" rows=10 cols=80></textarea>
  <button id="button" onclick="toggleStartStop()"></button>

  <script type="text/javascript">
    var recognizing;
    var recognition = new SpeechRecognition();
    recognition.continuous = true;
    reset();
    recognition.onend = reset;

    recognition.onresult = function (event) {
      for (var i = resultIndex; i < event.results.length; ++i) {
        if (event.results.final) {
          textarea.value += event.results[i][0].transcript;
        }
      }
    }

    function reset() {
      recognizing = false;
      button.innerHTML = "Click to Speak";
    }

    function toggleStartStop() {
      if (recognizing) {
        recognition.stop();
        reset();
      } else {
        recognition.start();
        recognizing = true;
        button.innerHTML = "Click to Stop";
      }
    }
  </script>
            
          

Using continuous speech recognition, showing final results in black and interim results in grey.

Example 4

            
  <button id="button" onclick="toggleStartStop()"></button>
  <div style="border:dotted;padding:10px">
    <span id="final_span"></span>
    <span id="interim_span" style="color:grey"></span>
  </div>

  <script type="text/javascript">
    var recognizing;
    var recognition = new SpeechRecognition();
    recognition.continuous = true;
    recognition.interim = true;
    reset();
    recognition.onend = reset;

    recognition.onresult = function (event) {
      var final = "";
      var interim = "";
      for (var i = 0; i < event.results.length; ++i) {
        if (event.results[i].final) {
          final += event.results[i][0].transcript;
        } else {
          interim += event.results[i][0].transcript;
        }
      }
      final_span.innerHTML = final;
      interim_span.innerHTML = interim;
    }

    function reset() {
      recognizing = false;
      button.innerHTML = "Click to Speak";
    }

    function toggleStartStop() {
      if (recognizing) {
        recognition.stop();
        reset();
      } else {
        recognition.start();
        recognizing = true;
        button.innerHTML = "Click to Stop";
        final_span.innerHTML = "";
        interim_span.innerHTML = "";
      }
    }
  </script>
            
          

Speech Synthesis Examples

Spoken text.

Example 1

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

Spoken text with attributes and events.

Example 2

            
  <script type="text/javascript">
     var u = new SpeechSynthesisUtterance();
     u.text = 'Hello World';
     u.lang = 'en-US';
     u.rate = 1.2;
     u.onend = function(event) { alert('Finished in ' + event.elapsedTime + ' seconds.'); }
     speechSynthesis.speak(u);
  </script>