CODEWITHSUNDEEP
javascripthtmltext-to-speech
Snow
Snow

Reputation: 37

HTML5 Speech Synthesis

Simply put, it is very simple and contains minimum amount of conding (only two lines)

but I am still not hearing anything. But Google TTS works perfectly on my laptop.

I only see "one two" alert when I run the page below. 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head>

<body>

<script>
    var utterance = new SpeechSynthesisUtterance('Hello baby');
    window.speechSynthesis.speak(utterance);
    alert("one two");
</script>

</body>
</html>

And I use Google Chrome Ver 36. How do I view the errors in my JavaScript? Thanks a lot Stack Overflow!

Upvotes: 3

Views: 10726

Answers (2)

AIon
AIon

Reputation: 13071

The above answer works nicely, but if you want to pick another voice use this:

function saySomething(whatToSay){
  const synth = window.speechSynthesis;
  // enter your voice here, because voices list loads asynchronously.. check the console.log below.
  getVoice("Google US English", synth)  
    .then(voice => {
      var utterThis = new SpeechSynthesisUtterance(whatToSay);
      utterThis.voice = voice;
      synth.speak(utterThis);
    })
    .catch(error => console.log("error: ", error));
}

function getVoice(voiceName, synth){
  return new Promise((resolve, reject) =>{
    synth.onvoiceschanged = function(){
      const voices = synth.getVoices();

      console.log("see all available languages and voices on your system: ", voices);

      for(let i = 0; i < voices.length ; i++) {
          if(voices[i].name == voiceName) {
            resolve(voices[i]);
          }
        }
    }
    synth.getVoices();
  });
}

saySomething("Mu ha ha! Works now.");

Upvotes: 1

wordSmith
wordSmith

Reputation: 3183

I helped put speech synth in google chrome. Glad you are using it!

**Edit: I ran your code in the Chrome 36 console and it works fine **

You should be using it like so:

if('speechSynthesis' in window){
    var speech = new SpeechSynthesisUtterance('hello baby');
    speech.lang = 'en-US';
    window.speechSynthesis.speak(speech);
}

You can check errors in the console in chrome by right clicking on the page and in the contextual menu, clicking the last option ( inspect element ).

More here: https://developer.chrome.com/devtools/docs/console

Upvotes: 11

Related Questions