Speech Synthesis: Web Speech API, part one

Warning This article was written over six months ago, and may contain outdated information.

It can’t have escaped your notice that iOS7 was recent­ly released, and with it a new ver­sion of Safari. Among many addi­tions and changes to its stan­dards sup­port comes (par­tial) imple­men­ta­tion of the new Web Speech API. This API has two core fea­tures: speech recog­ni­tion, which uses a web ser­vice to tran­scribe voice input; and speech syn­the­sis, which uses sys­tem libraries to out­put an arti­fi­cial voice. Safari for iOS7 brings sup­port for the lat­ter, so I’m going to briefly explain through how that works.

At it’s sim­plest, you pass the words you want to say into a new SpeechSynthesisUtterance object, then use the speak method of the speechSynthesis inter­face to say it. That’s eas­i­er than I’ve made it sound, as you can see in this code example:

var foo = new SpeechSynthesisUtterance('Hello world!');
window.speechSynthesis.speak(foo);

You can mod­i­fy the SpeechSynthesisUtterance object through a series of attrib­ut­es; the behav­iour of volume, rate and pitch should be fair­ly obvious.

foo.volume = 0.5; // 0 to 1
foo.rate = 1.5; // 0.1 to 10
foo.pitch = 2; //0 to 2

You can change the voice through the lang attribute; the default lan­guage is tak­en from the lan­guage of the doc­u­ment, but a dif­fer­ent four-val­ue ISO coun­try code on lang will sup­ply a dif­fer­ent voice:

foo.lang = 'en-GB';

I’ve built a pret­ty rough and ready demo page so you can play around with these val­ues; you’ll need to open it in Safari for iOS7, Safari 6.1 or 7 for OSX, or Chrome Canary (for OSX; untest­ed on oth­er platforms).

Demo: Speech Syn­the­sis API

There’s also a voiceURI attribute, imple­ment­ed in Safari as voice (and like­ly to change in the spec too), which allows you to spec­i­fy a dif­fer­ent vari­a­tion on the cur­rent voice, but I can’t get this to work. You can see all avail­able voic­es by call­ing the getVoices method on speechSynthesis:

var bar = window.speechSynthesis.getVoices();

This returns an array of sys­tem voic­es, from which you can get the val­ue of the voiceURI attribute and pass it into voice — although, as I said, this seems to have no effect in any of the tests I’ve run.

As I men­tioned at the start of this piece the Web Speech API has anoth­er side, which is speech recog­ni­tion. I’ll talk about that in a sub­se­quent arti­cle in the near future.

Update: From a lit­tle fur­ther exper­i­men­ta­tion it looks like on iOS the speech must be ini­ti­at­ed by a user action, rather than on page load (for exam­ple). Also, I’ve added a lit­tle east­er egg to my site: if you’re using Chrome Canary or Safari 6.1/7 (both for OSX), try using the site search box…

11 comments on
“Speech Synthesis: Web Speech API, part one”

  1. […] Speech Syn­the­sis: Web Speech API, part one – Bro­ken Links Check out the demo in Safari in iOS7 or Safari in OSX. […]

  2. Also works in Chrome Canary btw :-)

  3. […] iOS7 Safari now sup­ports the web speech API and Peter Gasston shows you how you can use it. Speech Syn­the­sis: Web Speech API, part one […]

  4. […] in Chrome (as of sta­ble v30) it appears that only speech recog­ni­tion is imple­ment­ed, and a recent blog has not­ed that Safari 6.1, 7 and Safari for iOS7 sup­ports speech syn­the­sis. Although it can […]

  5. Speech Syn­the­sis is no longer work­ing for me in Chrome v31 on Mac OS 10.7.5 (or Safari)… not sure when it stopped work­ing but it was fine ear­li­er in 2013. Tried it on a cou­ple of machines.

    Is it cur­rent­ly work­ing for you (Nov 26th 2013) ?

    I’m not see­ing any sta­tus changes on the Chrome mail­ing lists…

  6. @Rob Jones: it did stop work­ing for me briefly, but I put in a workaround and it seems fine for me now — in Chrome 32, at least.

  7. […] to their sites. Google added recog­ni­tion to the Chrome last year and today it adds built-in speech syn­the­sis, too. Using this API, devel­op­ers can get a list of sup­port­ed voic­es from a giv­en machine and then […]

  8. […] このベータのそのほかの新機能としては、Web Speech APIのサポートがある。これによりデベロッパは、自分が作るサイトに音声認識や音声合成機能を加えられる。音声認識の方はChromeに昨年加わったが、今日は音声合成機能が内蔵された。このAPIを使うためには、デベロッパがマシン上でサポートされている音声の中から指定して、音声合成エンジンがその音声で喋れるようにする(下図)。なおiOS 7のSafariも、部分的に音声合成をサポートしている。 […]

  9. I made a demo where you can choose a voice among sup­port­ed voic­es. Exist­ing demo does­n’t seem to allow to see the list of voices.

    Native OSX voice are fun to play with :)

    http://jsfiddle.net/NicuPrinFum/Fb8WG/embedded/result/

  10. […] Speech API ist nun um speech syn­the­sis erweit­ert wor­den. Eine Demo gibt es […]

  11. […] Speech API ist nun um speech syn­the­sis erweit­ert wor­den. Eine Demo gibt […]