Speech Recognition Safari

I have created a Speech Recognition site following the API: https://wicg.github.io/speech-api/ . The site works in Chrome but not in Safari.

This makes sense: Based on the browser support details: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API#browser_support, (speech to text is currently limited to Chrome for Desktop and Android.)

But doesn’t make sense based on: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#browser_compatibility The last link, claims there is support.

I am confused, does Safari offer support or not?

The error I get from Safari is: Speech recognition error detected: service-not-allowed

What does this error mean?

service-not-allowed

The user agent disallowed the requested speech recognition service, either because the user agent doesn't support it or because of reasons of security, privacy or user preference. In this case it would allow another more suitable speech recognition service to be used instead.

https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionErrorEvent/error

I tried giving explicit permission for the mic, in the Safari settings and in my computer settings. Didn’t work. I don’t know how to give explicit permission to safari for speech recognition. It should ask for permission, but it doesn’t.

Does anyone have any advice on how to proceed to get speech recognition to work on Safari?

This is the code:


var recognition = new speechRecognition()

var textBox = $("#textbox")

var instructions = $("#instructions")

var cont = ''

recognition.continuous = true

// Recognition started

recognition.onstart = function () {
    instructions.text("Voice recognition is on")
}

recognition.onspeechend = function () {
    instructions.text("No speech detected")
}

recognition.onerror = function (event) {
    instructions.text('Speech recognition error detected: ' + event.error)
}

recognition.onresult = function (event) {
    var current =  event.resultIndex;
    var transcript = event.results[current][0].transcript;

    cont += transcript

    textBox.val(cont)
}

$("#start-btn").click(function (event) {
    if(cont.length){
        cont += ''
    }
    recognition.start()
})``` 

I created this based on this tutorial: https://www.youtube.com/watch?v=rwB6RqqCmXc