Speech Synthesis API Demo

HTML

<textarea>this is a test</textarea>
<button>Say!</button>

CSS

textarea{
  width: 100%;
  height: 3em;
}

JavaScript

var input = document.querySelector('textarea');
var button = document.querySelector('button');



button.addEventListener('click',function() {
  var msg = new SpeechSynthesisUtterance();
  var voices = window.speechSynthesis.getVoices();
  msg.voice = voices[10]; // Note: some voices don't support altering params
/*   msg.voiceURI = 'native'; */
  msg.volume = 1; // 0 to 1
  msg.rate = 0.7; // 0.1 to 10
  msg.pitch = 1; //0 to 2
  msg.text = input.innerHTML;
  msg.lang = 'en-US';

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

  speechSynthesis.speak(msg);
});