Firefox and Speech Synthesis API - html

Question

I'm creating HTML5 Speech Synthesis application like below link.
http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API
Windows7 and Android Chrome33beta or Mac's safari works fine.
but Windows7-Firefox 27 seems support Speech-Synthesis-API,but not work because return empty voice list.
Is there any solution?

Answer 1

Check if Speech Synthesis API is supported your browser
http://caniuse.com/#feat=speech-synthesis
You can check it with modernizr
http://v3.modernizr.com/download/#-speechsynthesis
If browser not support it, you can use meSpek.js
http://www.masswerk.at/mespeak/

Answer 2

Unfortunately, it looks like only Firefox OS (and perhaps also, Firefox for Android, I have not checked) bundles and supports a speech synthesis library.
There is an open bug regarding desktop support.

Answer 3

As of release 44, the Speech Synthesis half of the api is available on Firefox Desktop.
But weirdly still requires that the flag be set. Under "Browser Compatibility":
Can be enabled via the media.webspeech.synth.enabled and media.webspeech.recognition.enable flags in about:config. Note that currently only the speech synthesis part is available in Firefox Desktop — the speech recognition part will be available soon, once the required internal permissions are sorted out.
I wonder why. MDN has even gone to the trouble of whipping up some nice working examples, why not have the functionality enabled be default?

Answer 4

If you just want to add a button to your webpage to read the page out loud, add this code to your website:
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script type="text/javascript">
<!-- //
var speechpause=0;
function toggleSpeech(){
if(speechpause!=1){
responsiveVoice.pause();
speechpause=1;
}else{
responsiveVoice.resume();
speechpause=0;
}
}
//-->
</script>
<div style="float:right">
<input onclick="responsiveVoice.speak($('#some_div_with_content').text(), 'Deutsch Female', {pitch: .7});" type="button" value="🔊 Play" />
<input onclick="toggleSpeech()" type="button" value="||" />
</div>
This uses jquery to get the text of the content, but that could be easily changed.