SpeechRecognition: Methode start()

Syntax

start()
start(audioTrack)

Parameter

audioTrack Optional

Eine MediaStreamTrack-Instanz, deren Audiodaten für die Spracherkennung verwendet werden. Wird sie nicht angegeben, versucht der Dienst stattdessen, Audiodaten vom Mikrofon der Benutzerin oder des Benutzers zu erkennen.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn ein audioTrack angegeben wurde und eine oder beide der folgenden Bedingungen zutreffen:

• Die Eigenschaft kind des Tracks ist nicht audio.
• Die Eigenschaft readyState des Tracks ist nicht live.

Beispiele

Sprache von einem Mikrofon erkennen

In unserem Beispiel Speech color changer erstellen wir mit dem Konstruktor SpeechRecognition() eine neue SpeechRecognition-Objektinstanz. Anschließend richten wir für ein <button>-Element einen click-Event-Handler ein. Wenn darauf geklickt wird, starten wir den Spracherkennungsdienst und warten auf Audiodaten vom Mikrofon der Benutzerin oder des Benutzers:

const recognition = new SpeechRecognition();

const diagnostic = document.querySelector(".output");
const bg = document.querySelector("html");
const startBtn = document.querySelector("button");

startBtn.onclick = () => {
  recognition.start();
  console.log("Ready to receive a color command.");
};

Wenn ein Ergebnis erfolgreich erkannt wurde, wird das result-Ereignis ausgelöst. Wir entnehmen die gesprochene Farbe aus dem Ereignisobjekt, indem wir den transcript der ersten SpeechRecognitionAlternative des ersten SpeechRecognitionResult in der zurückgegebenen results-Liste abrufen. Anschließend setzen wir die Hintergrundfarbe des <html>-Elements auf diese Farbe.

recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}`;
  bg.style.backgroundColor = color;
};

Sprache von einem Audiotrack erkennen

Dieser Code (ein Auszug aus unserer Demo zur Erkennung von Sprache aus einem Audiotrack) zeigt, wie Sprache aus einem Audiotrack erkannt wird. Zunächst erstellen wir eine neue SpeechRecognition-Instanz und setzen ihre Eigenschaft lang auf en-US. Dann rufen wir Referenzen auf ein <button>-Element und ein <p>-Element ab, um Ergebnisse und Diagnoseinformationen auszugeben.

const recognition = new SpeechRecognition();
recognition.lang = "en-US";

const startBtn = document.querySelector("button");
const diagnostic = document.querySelector(".output");

Als Nächstes fügen wir dem <button>-Element einen click-Event-Handler hinzu. Wenn darauf geklickt wird, erstellen wir mit dem Konstruktor Audio() ein neues <audio>-Element und laden eine MP3-Datei hinein. Sobald die MP3-Datei abgespielt werden kann (erkennbar am canplay-Ereignis), erfassen wir sie mit der Methode captureStream() als MediaStream. Anschließend extrahieren wir mit getAudioTracks() den Audio-MediaStreamTrack.

Dann spielen wir die Audiodaten ab (dies ist erforderlich, damit die Erkennung stattfinden kann) und übergeben den MediaStreamTrack an die Methode start(), um die Erkennung zu starten.

startBtn.addEventListener("click", () => {
  diagnostic.textContent = "";
  console.log("Loading audio track");
  const audioElement = new Audio("cheese-on-toast.mp3");
  audioElement.addEventListener("canplay", () => {
    const stream = audioElement.captureStream();
    const audioTrack = stream.getAudioTracks()[0];
    audioElement.play();
    recognition.start(audioTrack);
    console.log("Recognition started");
  });
});

Um die erkannten Audiodaten auszugeben, warten wir auf das result-Ereignis. Wenn es ausgelöst wird, rufen wir den transcript der ersten SpeechRecognitionAlternative des ersten SpeechRecognitionResult in der zurückgegebenen results-Liste ab. Wir geben das Transkript im <p>-Element aus und protokollieren den Konfidenzwert in der Konsole.

recognition.addEventListener("result", (event) => {
  const speech = event.results[0][0].transcript;
  diagnostic.textContent = `Speech recognized: ${speech}.`;
  console.log(`Confidence: ${event.results[0][0].confidence}`);
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Web Speech API