Synthesize speech from text in web app

1
votes

How can one synthesize speech in a web app?

Is there a way using the HTML5 Web Speech API?

For example, if I wanted to synthesize the sentence 'A quick brown fox jumps over the lazy dog', how could I do that without playing a pre-recorded file of someone reading exactly that sentence

2
javascripthtmltext-to-speechvoicespeech
The specification is here: Web Speech API Specification. However, at the moment browsers do not support it out of the box. - VisioN

2 Answers

4
votes

As it is right now, the SpeechSynthesis features which are part of the Web Speech API Specification have not been implemented in any browser yet.

However, you can have a look at this Chrome extension.

EDIT:

It seems that the lastest Chrome Canary build might include the feature, however it only specifies that the feature has been started (http://www.chromestatus.com/features) and I was unable to find any more substantive information about it.

EDIT2:

As mentionned in the comments by @cdf, it seems that you can now play around with that feature by launching chrome with the --enable-speech-synthesis flag. Please see this post.

EDIT3:

This appears to be in Webkit now, but not on iOS at the moment. Not even in Chrome on iOS. Demo @BrandonAaskov

1
votes

That code works both on Chrome and on Safari (taken from my app ttsreader):

if (!('speechSynthesis' in window)) {
        // Synthesis not supported. 
            alert('Speech Synthesis is not supported by your browser. Switch to Chrome or Safari');
        }

var msg = new SpeechSynthesisUtterance('hello world');
msg.volume = 1; // 0 to 1
msg.rate = 0.9; // 0.1 to 10
msg.pitch = 1; //0 to 2
msg.lang = "en-GB";
msg.text = "I will speak this out";
speechSynthesis.speak(msg);