api.SpeechRecognition - <SUMMARIZE THE PROBLEM>

[vfa-trungnt]

What type of issue is this?

Incorrect support data (example: BrowserX says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

api.SpeechRecognition.stops() seem like not working on Safari. Phenomenon:

• After speak to microphone and get text, in "recognition.onend" event, i call api.SpeechRecognition.stops(). However, if i continues speak to microphone then "recognition.onresult" event still give me texts that transfer from voice.

What browsers does this problem apply to, if applicable?

Safari

What did you expect to see?

I think it should work like on chrome. After call stop(), no result on recognition.onresult has return.

Did you test this? If so, how?

Yes, i do.

There is my code, you can check. It's vuejs:

<template>
    <div>
        <input id="talkBtn" type="button" value="Click to talk" />
        <p class="output"><em>…diagnostic messages</em></p>
    </div>
</template>

<script setup lang="ts">
    import { onMounted } from 'vue';

    onMounted(() => {
        init();
    });

    const init = () => {
        const SpeechRecognition =
            window.SpeechRecognition || window.webkitSpeechRecognition;
        const SpeechGrammarList =
                window.SpeechGrammarList || window.webkitSpeechGrammarList;
        const SpeechRecognitionEvent =
            window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;

        const recognition = new SpeechRecognition();
        recognition.continuous = false;
        recognition.lang = "ja-JP";
        recognition.interimResults = false;
        recognition.maxAlternatives = 1;
        const diagnostic = document.querySelector(".output");
        const bg = document.querySelector("html");
        const hints = document.querySelector(".hints");

        const talkBtn = document.getElementById( 'talkBtn' );
        talkBtn.onclick = () => {
            recognition.start();
            console.log("Ready to receive a color command.");
        };

        recognition.onresult = (event) => {
            const transcript = event.results[0][0].transcript;
            diagnostic.textContent = `Result received: ${transcript}.`;
            console.log(`Confidence: ${event.results[0][0].confidence}`);
            // recognition.stop();
            // recognition = new SpeechRecognition();
        };

        recognition.onerror = function(event) {
            console.error('Speech recognition error:', event.error);
        };

        recognition.onend = function(e) {
            console.log('Recognition stopped.', e, recognition);
            e.target.stop();
        };

        recognition.onstart = function(e) {
            console.log('Recognition start.', e);
        };
    }
</script>

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

No response

MDN URL

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

MDN metadata

MDN page report details

* Query: `api.SpeechRecognition` * Report started: 2024-07-17T10:09:49.873Z

[github-actions[bot]]

This issue was automatically closed because the title was left as the default, and a summary was not added.

If this is not a spam issue, please replace the <SUMMARIZE THE PROBLEM> part of the title with a short summary of the reported issue, and then post a follow-up comment. A maintainer will review your issue and reopen it if needed.