Speech Synthesis API

Here is a brand new addition to browser API’s, the Speech Synthesis API.  It is used to make the browser read text out loud to the viewer, and can be implemented for many different effects.  Want a congratulations to be sent to the visitor?  Now you aren’t constrained to simple visual input.  I’ll be extending this with the web audio API in the future, but I wanted to share this new discovery with you today.  Here is how to set things up.

var utterance  = new SpeechSynthesisUtterance();

That line will initialize the Speech Synthesis object in the browser, now we need to tell it what to say:

utterance.text = 'I may be a computer, but I want to be a real boy!';

That line places a string property for the utterance variable with the supplied text. Now we just need to string the pieces together:

speechSynthesis.speak(utterance);

That line will invoke the Speech Synthesis object and pass it the utterance variable, which we set with a text property that will now be read by the browser! Toss those three lines into your browser console right now to see them in action!

Pretty cool, huh! Now extend your knowledge with the Browser Speech Tutorial from Envato Tuts+, one of my favorite places to go to keep learning about emerging technologies.  Thanks for stopping by!