Currently I have the following code about speaking into the microphone and printing what I say into text to the Scratch screen:
class SpeechRecognitionApi {
constructor() {
console.log("audio recognition");
const SpeechToText =
window.speechRecognition || window.webkitSpeechRecognition;
this.speechApi = new SpeechToText();
this.speechApi.continuous = false;
this.speechApi.lang = "en-VN";
this.speechApi.interimResults = false;
// this.output = options.output ? options.output : document.createElement('div');
// console.log(this.output)
this.speechApi.onresult = function (event) {
console.log(event);
var resultIndex = event.resultIndex;
var transcript = event.results[resultIndex][0].transcript;
console.log("transcript>>", transcript);
// console.log(this.output)
// this.output.textContent = transcript;
sttEmitter.emit("stt", transcript);
};
}
start0() {
this.speechApi.start();
}
}
listenAndWait() {
let speech = new SpeechRecognitionApi();
speech.start0();
return new Promise((resolve) => {
sttEmitter.on("stt", resolve);
});
}
But when I click listen and wait, my code is always blocked and can't be removed in the browser
Is there any way I can fix the code so that the browser doesn't block the microphone?
I want when I click listen and wait, the browser won't block the microphone and can print what I say to the screen
You cannot fix this issue from your code. Your code is sending audio coming from the client-side microphone to the web server. This is generally considered a privacy risk; even a potential security risk. The web browser does the only sensible thing it can do: block access to your microphone and webcam.
The orange icon in your second screenshot suggests you are using Brave Browser. Brave claims to offer "The best privacy online", so I'm not surprised it is denying some arbitrary web application access to your microphone.
Assuming you trust the web site, you can change site permissions. Please note that this only fixes the problem on your web browser. If you intend to share the project with others on the same web site, then they will run into the same issue. Rightfully so; their web browsers have no reason to blindly trust your code.
