window object I came across an entry called speechSynthesis:

“What’s that?” I thought, and promptly googled it. Well, turns out that a real text-to-speech (TTS) API has somehow made it into HTML5, and it’s already support it new(ish) versions of Chrome and Safari.

"> window object I came across an entry called speechSynthesis:

“What’s that?” I thought, and promptly googled it. Well, turns out that a real text-to-speech (TTS) API has somehow made it into HTML5, and it’s already support it new(ish) versions of Chrome and Safari.

"> window object I came across an entry called speechSynthesis:

“What’s that?” I thought, and promptly googled it. Well, turns out that a real text-to-speech (TTS) API has somehow made it into HTML5, and it’s already support it new(ish) versions of Chrome and Safari.

" />
Christoph Wagner

Freelance Software Developer

Your browser can talk!?!

04 June 2014

So I was debugging some code in Chrome’s Web Inspector, and while looking at the window object I came across an entry called speechSynthesis:

“What’s that?” I thought, and promptly googled it. Well, turns out that a real text-to-speech (TTS) API has somehow made it into HTML5, and it’s already support it new(ish) versions of Chrome and Safari.

So what can you do with it? First thing I noticed was that the API is a wee bit cumbersome, requiring you to instantiate a SpeechSynthesisUtterance object before you can do anything:

var sentence = "Hello, good Sir";
var utterance = new SpeechSynthesisUtterance(sentence);
speechSynthesis.speak(utterance);

Second thing I noticed, there are different voices available! You can use this code to print a list of them:

speechSynthesis.getVoices().forEach(function(voice) {
  console.log(voice.name);
});

On my Macbook Pro with Chrome 35, I get the following list:

Google US English
Google UK English Male
Google UK English Female
Google Español
Google Français
Google Italiano
Google Deutsch
Google 日本人
Google 한국의
Google 中国的
Alex
Agnes
Albert
Bad News
Bahh
Bells
Boing
Bruce
Bubbles
Cellos
Deranged
Fred
Good News
Hysterical
Junior
Kathy
Pipe Organ
Princess
Ralph
Trinoids
Vicki
Victoria
Whisper
Zarvox

Looks like the first ten are supplied by Google, while the rest are from MacOS X’s built-in text-to-speech API.

So now that we know that, why don’t we have each voice introduce itself? Here’s the code:

speechSynthesis.getVoices().forEach(function(voice) {
  var name = voice.name,
      text = "Hello, my name is " + name,
      speech = new SpeechSynthesisUtterance(text);
  speech.voice = voice;
  speechSynthesis.speak(speech);
});

I don’t know about you, but I nearly died from laughter while listening to some of them. The accent on the Spanish and Japanese voices is just so perfect.

Finally, let’s have some fun! We’ll use this to make our browser ticklish. Try clicking this link and then hover your mouse pointer over some links. Works best on a Mac, because the voice I’m using is probably not available on Windows.

Here is the source if you’re interested.

What would you build with this?

PS: User L0wkey on reddit mentioned a great CodePen that gives you a minimalistic UI to explore the capabilities of your browser’s speech synthesis. Thanks!