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
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
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…