Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SpeechSynthesis.getVoices() not listing voices in Firefox

I am developing an application that requires me to use text to speech in the web browser. I am using the HTML5 Speech Synthesis for it. On Google Chrome the code runs fine, with all the available voices being listed using |getVoices()|, but in Firefox no voice is listed at all. I am testing my code on Firefox 56.0 (Ubuntu).

On searching over the internet, I did come across a StackOverflow answer that suggested that the getVoices() function should be called after the |onVoiceChanged| event

    window.speechSynthesis.onvoiceschanged = function() {
    window.speechSynthesis.getVoices();
    ... 
};

I am invoking the call in the above mentioned manner and it works as desired in Chrome, but not on Firefox.

Another StackOverflow answer suggested that I enable the |media.webspeech.synth.enabled| in about:config of Firefox, but in my Firefox the preference |media.webspeech.synth.enabled| is already set to true.

I checked the MDN documentation https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices and the example on this page does not run for me in Firefox, but runs fine in Chrome. I found that CanIUse.com lists that SpeechSynthesis as supported in Firefox 55 onwards, but it does not work for me.

Also The demo by Mozilla Developer Network to demonstrate the Speech Synthesis fails to work on my Firefox, but runs fine on Google Chrome. I have extensively searched online for a solution but could not find one. Can someone please point me in the right direction here.

like image 965
Abhishek Potnis Avatar asked Oct 07 '17 06:10

Abhishek Potnis


People also ask

How do I turn on speech recognition in Firefox?

To use the recognition and synthesis parts of the spec in Firefox (desktop/Android), you'll need to enable the media. webspeech. recognition. enable and media.

How do I use speechSynthesis in Javascript?

Inside the inputForm. onsubmit handler, we stop the form submitting with preventDefault(), create a new SpeechSynthesisUtterance instance containing the text from the text <input> , set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the SpeechSynthesis.

How do I change the voice in SpeechSynthesisUtterance?

To use a voice, set the voice property on your SpeechSynthesisUtterance instance to the desired SpeechSynthesisVoice object. The example below shows how to do this. var utterance = new SpeechSynthesisUtterance('Hello Treehouse'); var voices = window. speechSynthesis.

What is window speechSynthesis?

speechSynthesis. The speechSynthesis read-only property of the Window object returns a SpeechSynthesis object, which is the entry point into using Web Speech API speech synthesis functionality.


3 Answers

Ran into the same issue and here's what I figured out.

  • Doesn't work for me on Firefox Ubuntu 16.04
  • On virtualbox Windows works. The voices come from Windows. "Microsoft David" is one of the choices.
  • Chrome works on Ubuntu, but only when it's online. It's not showing any traffic in the console, but the voice only works when it is online!
like image 164
Dror Avatar answered Oct 13 '22 21:10

Dror


I'm running FireFox 58.0.2 (64-bit) under Windows 7 64 bit pro. The demo you mention does list one voice for me: Microsoft Anna - English (United States) (en-US). This voice is furnished by my Windows OS, not FireFox (Chrome lists 19 additional voices which are included with Chrome).

The reason your code works in Chrome but not Firefox is that Firefox doesn't invoke speechSynthesis.onvoiceschanged and Chrome does.

Why? Here is Mozilla's description of the voiceschanged event:

The voiceschanged event of the Web Speech API is fired when the list of SpeechSynthesisVoice objects that would be returned by the SpeechSynthesis.getVoices() method has changed (when the voiceschanged event fires.)

Just a guess, but possibly the reason for the difference is that Chrome fires the event after it "adds" voices to your page. Firefox doesn't, so it doesn't.

The aforementioned demo gets around this incompatibility by calling populateVoiceList() right before the conditional code that triggers it (fourth line from bottom below, from http://mdn.github.io/web-speech-api/speak-easy-synthesis/script.js):

function populateVoiceList() {
  voices = synth.getVoices();
  var selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
  voiceSelect.innerHTML = '';
  for(i = 0; i < voices.length ; i++) {
    var option = document.createElement('option');
    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';

    if(voices[i].default) {
      option.textContent += ' -- DEFAULT';
    }

    option.setAttribute('data-lang', voices[i].lang);
    option.setAttribute('data-name', voices[i].name);
    voiceSelect.appendChild(option);
  }
  voiceSelect.selectedIndex = selectedIndex;
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

This is the approach I've adopted for my web application; otherwise my list of voices never gets populated by Firefox. This code also happens to address a similar problem with Safari; see voiceschanged event not fired in Safari.

like image 1
CODE-REaD Avatar answered Oct 13 '22 22:10

CODE-REaD


For anyone else still struggling with this, this is what fixed it for me. Assuming speech-dispatcher and espeak are already installed, the issue may be that there are multiple speech-dispatcher output modules installed and the default of them has no voices.

For example, on my system,

# spd-say -O lists output modules
$ spd-say -O
OUTPUT MODULES
espeak-ng-mbrola
espeak-ng

# spd-say -L lists all voices associated with the current
# output module
$ spd-say -L
                     NAME                 LANGUAGE                  VARIANT

$ 

Notice that spd-say -L outputs an empty table, even though spd-say "Hello world" works. I had no voices installed for the default speech-dispatcher module.

The second module in the list, espeak-ng, does have voices installed. Running spd-say -o espeak-ng -L produces a long table (-o selects a specific module).

Firefox seems to only query the default output module. This AskUbuntu post explains how to change the default output module.

Installing another output module, however, fixed the issue for me (I had trouble changing the default output module via /etc/speech-dispatcher/speechd.conf).

In short,

$ sudo apt install speech-dispatcher-pico

fixed the issue.

like image 1
H.H. Avatar answered Oct 13 '22 23:10

H.H.