It can’t have escaped your notice that iOS7 was recently released, and with it a new version of Safari. Among many additions and changes to its standards support comes (partial) implementation of the new Web Speech API. This API has two core features: speech recognition, which uses a web service to transcribe voice input; and speech synthesis, which uses system libraries to output an artificial voice. Safari for iOS7 brings support for the latter, so I’m going to briefly explain through how that works.
At it’s simplest, you pass the words you want to say into a new SpeechSynthesisUtterance
object, then use the speak
method of the speechSynthesis
interface to say it. That’s easier 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 modify the SpeechSynthesisUtterance
object through a series of attributes; the behaviour of volume
, rate
and pitch
should be fairly 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 language is taken from the language of the document, but a different four-value ISO country code on lang
will supply a different voice:
foo.lang = 'en-GB';
I’ve built a pretty rough and ready demo page so you can play around with these values; you’ll need to open it in Safari for iOS7, Safari 6.1 or 7 for OSX, or Chrome Canary (for OSX; untested on other platforms).
There’s also a voiceURI
attribute, implemented in Safari as voice
(and likely to change in the spec too), which allows you to specify a different variation on the current voice, but I can’t get this to work. You can see all available voices by calling the getVoices
method on speechSynthesis
:
var bar = window.speechSynthesis.getVoices();
This returns an array of system voices, from which you can get the value 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 mentioned at the start of this piece the Web Speech API has another side, which is speech recognition. I’ll talk about that in a subsequent article in the near future.
Update: From a little further experimentation it looks like on iOS the speech must be initiated by a user action, rather than on page load (for example). Also, I’ve added a little easter egg to my site: if you’re using Chrome Canary or Safari 6.1/7 (both for OSX), try using the site search box…
[…] Speech Synthesis: Web Speech API, part one – Broken Links Check out the demo in Safari in iOS7 or Safari in OSX. […]
Article Roundup for 09.20.2013 | Tvenge Design [September 20th, 2013, 19:03]
Also works in Chrome Canary btw :-)
Šime Vidas [September 23rd, 2013, 03:51]
[…] iOS7 Safari now supports the web speech API and Peter Gasston shows you how you can use it. Speech Synthesis: Web Speech API, part one […]
Best of JavaScript, HTML & CSS – Week of September 16, 2013 | Flippin' Awesome [September 23rd, 2013, 19:08]
[…] in Chrome (as of stable v30) it appears that only speech recognition is implemented, and a recent blog has noted that Safari 6.1, 7 and Safari for iOS7 supports speech synthesis. Although it can […]
Working with the Web Speech API | Graham Hinchly [November 14th, 2013, 20:44]
Speech Synthesis is no longer working for me in Chrome v31 on Mac OS 10.7.5 (or Safari)… not sure when it stopped working but it was fine earlier in 2013. Tried it on a couple of machines.
Is it currently working for you (Nov 26th 2013) ?
I’m not seeing any status changes on the Chrome mailing lists…
Rob Jones [November 26th, 2013, 23:47]
@Rob Jones: it did stop working for me briefly, but I put in a workaround and it seems fine for me now – in Chrome 32, at least.
Peter [November 27th, 2013, 00:14]
[…] to their sites. Google added recognition to the Chrome last year and today it adds built-in speech synthesis, too. Using this API, developers can get a list of supported voices from a given machine and then […]
Chrome 33 Beta Introduces Custom Elements And Support For Speech Synthesis API | TechCrunch [January 16th, 2014, 18:40]
[…] このベータのそのほかの新機能としては、Web Speech APIのサポートがある。これによりデベロッパは、自分が作るサイトに音声認識や音声合成機能を加えられる。音声認識の方はChromeに昨年加わったが、今日は音声合成機能が内蔵された。このAPIを使うためには、デベロッパがマシン上でサポートされている音声の中から指定して、音声合成エンジンがその音声で喋れるようにする(下図)。なおiOS 7のSafariも、部分的に音声合成をサポートしている。 […]
Chrome 33のベータはCustom Elementsを導入, 音声合成APIをサポート | TechCrunch Japan [January 17th, 2014, 10:01]
I made a demo where you can choose a voice among supported voices. Existing demo doesn’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/
Nicolae Namolovan [January 17th, 2014, 10:08]
[…] Speech API ist nun um speech synthesis erweitert worden. Eine Demo gibt es […]
Chrome 33 als Beta - GWB [January 17th, 2014, 16:57]
[…] Speech API ist nun um speech synthesis erweitert worden. Eine Demo gibt […]
Google Chrome 33 ist fertig - GWB [February 20th, 2014, 21:40]