I'm trying to build a web search engine with Speech Recognition support, just like google.

So far, it works on Chrome but not on Firefox. I read from Mozilla's site that it doesn't properly support web speech API but how for instance google search and youtube works also on Firefox? Is there any 3rd party API/library for cross-browser support?

I enabled the following settings on firefox but still does not work.

about:config

media.webspeech.recognition.enable       => true
media.webspeech.recognition.force_enable => true

Here is what I've done and works on Chrome but not on Firefox. Am I doing it wrong?

var recognition = null;

if (window.hasOwnProperty('webkitSpeechRecognition') || window.hasOwnProperty('SpeechRecognition'))
    recognition = new webkitSpeechRecognition() || new SpeechRecognition();

if (recognition) {
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.lang = 'en-US';
    // recognition.maxAlternatives = 1;
    recognition.start();

    recognition.onresult = function (e) {
        document.getElementById('search').value = e.results[0][0].transcript;
        recognition.stop();
    };
    
    recognition.onerror = function (e) {
        console.log('failed!');
        recognition.stop();
    };
} else {
    alert('Your web browser does not support SpeechRecognition. Try Chrome.');
}