Kontinuierliche Spracherkennung im Browser wie "ok google" oder "hey siri"

Question

Ich mache eine POC und meine Anforderung ist, dass ich die Funktion wie OK google oder Hey Siri im Browser implementieren möchte.

Ich verwende den Chrome Browser Web speech api. Die Dinge, die mir aufgefallen sind, dass ich die Erkennung nicht fortsetzen kann, da sie nach einer gewissen Zeit automatisch beendet wird und ich ihre Relevanz aus Sicherheitsgründen kenne. Ich mache gerade einen anderen Hack wie wenn die SpeechReognition dann auf seinem end Ereignis I weiter start die SpeechRecogntion beendet, aber es ist nicht der beste Weg, eine solche Lösung zu implementieren, da angenommen, wenn ich die 2 Instanzen der gleichen Anwendung auf dem anderen Browser Tab dann verwende Es funktioniert nicht oder ich verwende eine andere Anwendung in meinem Browser, die die Spracherkennung verwendet, dann verhält sich die Anwendung nicht wie erwartet. Ich suche nach einem besten Ansatz, um dieses Problem zu lösen.

Vielen Dank im Voraus.

Answer 1

Da Ihr Problem darin besteht, dass Sie die SpeechRecognition nicht kontinuierlich für lange Zeiträume ausführen können, wäre eine Möglichkeit, die SpeechRecognition nur zu starten, wenn Sie etwas Input im Mikrofon erhalten.

Nur auf diese Weise starten Sie die SR und suchen nach Ihrem magic_word.
Wenn das magic_word gefunden wird, können Sie das SR normalerweise für Ihre anderen Aufgaben verwenden.

Dies kann von der WebAudioAPI erkannt werden, die nicht von dieser Zeitbeschränkung betroffen ist SR leidet darunter. Sie können es mit einem LocalMediaStream von MediaDevices.getUserMedia füttern.

Weitere Informationen finden Sie unter folgendem Skript: this answer.

Hier ist, wie Sie es zu einem Spracherkennungs befestigen könnte:

const magic_word = ##YOUR_MAGIC_WORD##; 

// initialize our SpeechRecognition object 
let recognition = new webkitSpeechRecognition(); 
recognition.lang = 'en-US'; 
recognition.interimResults = false; 
recognition.maxAlternatives = 1; 
recognition.continuous = true; 

// detect the magic word 
recognition.onresult = e => { 
    // extract all the transcripts 
    var transcripts = [].concat.apply([], [...e.results] 
     .map(res => [...res] 
     .map(alt => alt.transcript) 
    ) 
    ); 
    if(transcripts.some(t => t.indexOf(magic_word) > -1)){ 
    //do something awesome, like starting your own command listeners 
    } 
    else{ 
    // didn't understood... 
    } 
} 
// called when we detect silence 
function stopSpeech(){ 
    recognition.stop(); 
} 
// called when we detect sound 
function startSpeech(){ 
    try{ // calling it twice will throw... 
     recognition.start(); 
    } 
    catch(e){} 
} 
// request a LocalMediaStream 
navigator.mediaDevices.getUserMedia({audio:true}) 
// add our listeners 
.then(stream => detectSilence(stream, stopSpeech, startSpeech)) 
.catch(e => log(e.message)); 


function detectSilence(
    stream, 
    onSoundEnd = _=>{}, 
    onSoundStart = _=>{}, 
    silence_delay = 500, 
    min_decibels = -80 
) { 
    const ctx = new AudioContext(); 
    const analyser = ctx.createAnalyser(); 
    const streamNode = ctx.createMediaStreamSource(stream); 
    streamNode.connect(analyser); 
    analyser.minDecibels = min_decibels; 

    const data = new Uint8Array(analyser.frequencyBinCount); // will hold our data 
    let silence_start = performance.now(); 
    let triggered = false; // trigger only once per silence event 

    function loop(time) { 
    requestAnimationFrame(loop); // we'll loop every 60th of a second to check 
    analyser.getByteFrequencyData(data); // get current data 
    if (data.some(v => v)) { // if there is data above the given db limit 
     if(triggered){ 
     triggered = false; 
     onSoundStart(); 
     } 
     silence_start = time; // set it to now 
    } 
    if (!triggered && time - silence_start > silence_delay) { 
     onSoundEnd(); 
     triggered = true; 
    } 
    } 
    loop(); 
} 

Als a plunker, da weder StackSnippets noch iframes der jsfiddle GUM in zwei Versionen erlauben ...