Verwendung der Web Speech API

Spracherkennung

Die Spracherkennung beinhaltet das Empfangen von Audio von einem Mikrofon des Gerts (oder von einer Audiospur), das dann von einem Spracherkennungsdienst berprft wird. Wenn der Dienst ein Wort oder einen Satz erfolgreich erkennt, gibt er eine Textzeichenkette (oder eine Liste von Zeichenketten) zurck, die Sie verwenden knnen, um weitere Aktionen einzuleiten.

Die Web Speech API hat eine Hauptschnittstelle fr die Steuerung SpeechRecognition und mehrere verwandte Schnittstellen zur Darstellung der Ergebnisse.

In der Regel wird das auf dem Gert des Benutzers verfgbare Spracherkennungssystem fr die Spracherkennung verwendet. Die meisten modernen Betriebssysteme verfgen ber ein Spracherkennungssystem zur Erteilung von Sprachbefehlen, wie Diktat auf macOS oder Copilot auf Windows.

Standardmig beinhaltet die Verwendung der Spracherkennung auf einer Webseite eine serverbasierte Erkennungsmaschine. Ihr Audio wird zu einem Webdienst zur Erkennungsverarbeitung gesendet, daher funktioniert es nicht offline.

Um die Privatsphre und Leistung zu verbessern, knnen Sie angeben, dass die Spracherkennung auf dem Gert durchgefhrt wird. Dies stellt sicher, dass weder das Audio noch die transkribierte Sprache zur Verarbeitung an einen Drittanbieterdienst gesendet werden. Wir behandeln die Funktionalitt auf dem Gert ausfhrlicher im Abschnitt Spracherkennung auf dem Gert.

Demo

Um zu demonstrieren, wie man Spracherkennung verwendet, haben wir eine Beispiel-App namens Speech Color Changer erstellt. Nachdem Sie die Schaltflche Start recognition gedrckt haben, sagen Sie ein HTML-Farbkeyword. Die Hintergrundfarbe der App ndert sich in diese Farbe.

[Screenshot unserer Demo-App namens Speech Color Changer. Die App fordert den Benutzer auf, die Schaltflche zu drcken und eine Farbe zu sagen. Sie ndert den Hintergrund der App in diese Farbe. In diesem Fall hat sie die Hintergrundfarbe auf pink gendert.]

Um die Demo auszufhren, navigieren Sie zur Live-Demo-URL in einem untersttzenden Browser.

HTML und CSS

Das HTML und CSS fr die App sind einfach. Es gibt einen Titel, einen Anweisungsabsatz (<p>), ein Steuerungs-<button> und einen Ausgabeabsatz, in dem wir Diagnosemeldungen anzeigen, einschlielich der Wrter, die unsere App erkannt hat.

<h1>Speech color changer</h1>

<p class="hints"></p>

<button>Start recognition</button>

<p class="output"><em>...diagnostic messages</em></p>

Das CSS bietet ein grundlegendes responsives Styling, so dass es auf verschiedenen Gerten gut aussieht.

JavaScript

Schauen wir uns das JavaScript etwas genauer an.

Prfixierte Eigenschaften

Einige Browser untersttzen derzeit die Spracherkennung mit prfixierten Eigenschaften. Daher enthalten wir am Anfang unseres Codes diese Zeilen, um sowohl prfixierte als auch unprfixierte Versionen zu erlauben:

const SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;
const SpeechRecognitionEvent =
  window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;

Farbliste

Der nchste Teil unseres Codes definiert einige Beispiel-Farben, die wir der Benutzeroberflche anzeigen, um den Benutzern eine Vorstellung davon zu geben, was sie sagen sollen:

const colors = [
  "aqua",
  "azure",
  "beige",
  "bisque",
  "black",
  "blue",
  "brown",
  "chocolate",
  "coral",
  // 
];

Erstellung einer Spracherkennung-Instanz

Als nchstes definieren wir eine Spracherkennung-Instanz, um die Erkennung in unserer App zu steuern. Dies tun wir mit dem SpeechRecognition()-Konstruktor.

const recognition = new SpeechRecognition();

Dann setzen wir einige Eigenschaften der Erkennungsinstanz:

• SpeechRecognition.continuous: Bestimmt, ob die Ergebnisse kontinuierlich (true) oder nur einmal bei jedem Start einer Erkennung erfasst werden (false).
• SpeechRecognition.lang: Setzt die Sprache der Erkennung. Dies explizit festzulegen, ist die empfohlene beste Praxis.
• SpeechRecognition.interimResults: Definiert, ob das Spracherkennungssystem vorlufige Ergebnisse oder nur endgltige Ergebnisse zurckgeben soll. Fr diese Demo sind endgltige Ergebnisse ausreichend.
• SpeechRecognition.maxAlternatives: Setzt die Anzahl alternativer potenzieller Treffer, die pro Ergebnis zurckgegeben werden sollen. Dies kann manchmal ntzlich sein, beispielsweise wenn ein Ergebnis nicht vllig klar ist und Sie eine Liste von Alternativen anzeigen mchten, aus denen der Benutzer whlen kann. Aber fr diese Demo ist es nicht erforderlich, also geben wir nur eine an (was sowieso der Standard ist).

recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;

Start der Spracherkennung

Nachdem wir Referenzen zum Ausgabeabsatz, dem <html>-Element, dem Anweisungsabsatz und dem <button> erfasst haben, implementieren wir einen onclick-Handler. Wenn ein Benutzer die Schaltflche drckt, startet der Spracherkennungsdienst, indem SpeechRecognition.start() aufgerufen wird. Wir haben auch eine forEach()-Methode verwendet, um farbige Indikatoren auszugeben, die anzeigen, welche Farben Benutzer versuchen knnen zu sagen.

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

const colorHTML = colors
  .map((v) => `<span >${v}</span>`)
  .join("");
hints.innerHTML = `Press the button then say a color to change the background color of the app. Try ${colorHTML}.`;

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

Empfang und Verarbeitung von Ergebnissen

Sobald die Spracherkennung gestartet wurde, stehen mehrere Ereignis-Handler zur Verfgung, die verwendet werden knnen, um Ergebnisse und andere verwandte Informationen abzurufen (siehe Ereignisse fr SpeechRecognition). Der am hufigsten verwendete ist das result-Ereignis, das nach Erhalt eines erfolgreichen Ergebnisses ausgelst wird:

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

Die zweite Zeile ist etwas komplex, daher erklren wir hier jeden Teil:

• Die SpeechRecognitionEvent.results-Eigenschaft gibt ein SpeechRecognitionResultList-Objekt zurck, das SpeechRecognitionResult-Objekte enthlt. Es hat einen Getter, sodass es wie ein Array zugegriffen werden kann das erste [0] gibt das SpeechRecognitionResult an Position 0 zurck.
• Jedes SpeechRecognitionResult-Objekt enthlt wiederum SpeechRecognitionAlternative-Objekte, die jeweils ein erkanntes Wort darstellen. Diese haben auch Getter, sodass sie wie Arrays zugegriffen werden knnen das zweite [0] gibt die SpeechRecognitionAlternative an Position 0 zurck.
• Die transcript-Eigenschaft der SpeechRecognitionAlternative gibt eine Zeichenkette zurck, die den erkannten Text enthlt. Dieser Wert wird dann verwendet, um die Hintergrundfarbe in eine erkannte Farbe zu ndern und auch als Diagnosemeldung in der Benutzeroberflche zu melden.

Wir verwenden auch das speechend-Ereignis, um den Spracherkennungsdienst zu stoppen (mit SpeechRecognition.stop()), nachdem ein einzelnes Wort erkannt wurde:

recognition.onspeechend = () => {
  recognition.stop();
};

Umgang mit Fehlern und nicht erkannten Wrtern

Die letzten beiden Handler behandeln Flle, in denen der gesprochene Begriff nicht erkannt wird oder ein Fehler bei der Erkennung auftritt. Das nomatch-Ereignis soll den ersten Fall behandeln, obwohl das Erkennungs-Engine in den meisten Fllen etwas zurckgibt, selbst wenn es unverstndlich ist:

recognition.onnomatch = (event) => {
  diagnostic.textContent = "I didn't recognize that color.";
};

Das error-Ereignis behandelt Flle, in denen ein tatschlicher Fehler bei der Erkennung vorliegt die SpeechRecognitionErrorEvent.error-Eigenschaft enthlt den zurckgegebenen Fehler:

recognition.onerror = (event) => {
  diagnostic.textContent = `Error occurred in recognition: ${event.error}`;
};

Spracherkennung auf dem Gert

Die Spracherkennung wird normalerweise mit einem Online-Dienst durchgefhrt. Das bedeutet, dass eine Audioaufnahme an einen Server zur Verarbeitung gesendet wird und die Ergebnisse dann an den Browser zurckgegeben werden. Dies hat einige Probleme:

• Privatsphre: Viele Benutzer sind nicht damit einverstanden, dass ihre Sprache an einen Server gesendet wird.
• Leistung: Das Senden von Daten an einen Server fr jede Erkennung kann die Leistung in intensiveren Anwendungen verlangsamen und Ihre Apps funktionieren nicht offline.

Um diese Probleme zu mindern, lsst die Web Speech API Sie angeben, dass die Spracherkennung vom Browser auf dem Gert gehandhabt werden soll. Dies erfordert einen einmaligen Sprachpaket-Download fr jede Sprache, die Sie erkennen mchten; einmal installiert, wird die Funktionalitt offline verfgbar sein.

Dieser Abschnitt erklrt, wie man die Spracherkennung auf dem Gert verwendet.

Demo

Um die Spracherkennung auf dem Gert zu demonstrieren, haben wir eine Beispiel-App namens On-device Speech Color Changer erstellt (Demo live ausfhren).

Diese Demo funktioniert sehr hnlich zur bereits besprochenen Online-Variante der Speech Colour Changer Demo, mit den unten angegebenen Unterschieden.

Spezifizieren der On-Device-Erkennung

Um anzugeben, dass Sie die Verarbeitung auf dem Gert durch den Browser verwenden mchten, setzen Sie die SpeechRecognition.processLocally-Eigenschaft vor dem Starten einer Spracherkennung auf true (der Standardwert ist false):

recognition.processLocally = true;

Verfgbarkeit prfen und Sprachpakete installieren

Damit die Spracherkennung auf dem Gert funktioniert, muss der Browser ber ein installiertes Sprachpaket fr die Sprache verfgen, die Sie erkennen mchten. Wenn Sie die start()-Methode ausfhren, nachdem Sie processLocally = true angegeben haben, das richtige Sprachpaket jedoch nicht installiert ist, schlgt der Funktionsaufruf mit einem language-not-supported-Fehler fehl.

Um sicherzustellen, dass das richtige Sprachpaket installiert wird, befolgen Sie diese zwei Schritte:

1. Prfen Sie, ob das Sprachpaket auf dem Gert des Benutzers verfgbar ist: Dies wird mit der statischen Methode SpeechRecognition.available() gehandhabt.
2. Installieren Sie das Sprachpaket, wenn es nicht verfgbar ist: Dies wird mit der statischen Methode SpeechRecognition.install() gehandhabt.

Diese Schritte werden im folgenden click-Ereignis-Handler auf dem Steuerungs-<button> der App gehandhabt:

startBtn.addEventListener("click", () => {
  // check availability of target language
  SpeechRecognition.available({ langs: ["en-US"], processLocally: true }).then(
    (result) => {
      if (result === "unavailable") {
        diagnostic.textContent = `en-US is not available to download at this time. Sorry!`;
      } else if (result === "available") {
        recognition.start();
        console.log("Ready to receive a color command.");
      } else {
        diagnostic.textContent = `en-US language pack is downloading...`;
        SpeechRecognition.install({
          langs: ["en-US"],
          processLocally: true,
        }).then((result) => {
          if (result) {
            diagnostic.textContent = `en-US language pack downloaded. Start recognition again.`;
          } else {
            diagnostic.textContent = `en-US language pack failed to download. Try again later.`;
          }
        });
      }
    },
  );
});

Die available()-Methode nimmt ein Optionsobjekt entgegen, das zwei Eigenschaften enthlt:

• Ein langs-Array, das die Sprachen enthlt, fr die die Verfgbarkeit geprft werden soll.
• Ein processLocally-Boolean, der angibt, ob die Verfgbarkeit der Sprache nur auf dem Gert (true) oder lokal oder ber einen Server-basierten Erkennungsdienst (false, die Standardeinstellung) geprft werden soll.

Wird diese Methode ausgefhrt, gibt sie ein Promise zurck, das mit einem Wert aufgelst wird, der die Verfgbarkeit der angegebenen Sprachen angibt. In unserer Demo testen wir fr drei Bedingungen:

• Wenn der zurckgegebene Wert unavailable ist, bedeutet das, dass kein geeignetes Sprachpaket zum Herunterladen verfgbar ist. Wir drucken auch eine entsprechende Nachricht an die Ausgabe.
• Wenn der Wert available ist, bedeutet das, dass das Sprachpaket lokal verfgbar ist, sodass die Erkennung beginnen kann. In diesem Fall fhren wir start() aus und loggen eine Nachricht in die Konsole, wenn die App bereit ist, Sprache zu empfangen.
• Wenn der Wert etwas anderes ist (downloadable oder downloading), drucken wir eine Diagnosemeldung aus, um den Benutzer darber zu informieren, dass ein Sprachpaket-Download beginnt, und fhren dann die install()-Methode aus, um den Download zu handhaben.

Die install()-Methode funktioniert hnlich wie die available()-Methode, auer dass ihr Optionsobjekt nur das langs-Array enthlt. Wird sie ausgefhrt, startet sie das Herunterladen aller Sprachpakete fr die in langs angegebenen Sprachen und gibt ein Promise zurck, das mit einem Boolean aufgelst wird, der angibt, ob die angegebenen Sprachpakete erfolgreich heruntergeladen und installiert wurden (true) oder nicht (false).

Fr diese Demo drucken wir eine Diagnosemeldung, die die Erfolgs- und Fehlermanagementflle anzeigt. In einer vollstndigeren App wrden Sie wahrscheinlich die Steuerungen whrend des Download-Prozesses deaktivieren und sie wieder aktivieren, nachdem das Versprechen erfllt ist.

Integration der Berechtigungsrichtlinie

Die Verwendung der Methoden available() und install() wird durch die on-device-speech-recognition-Permissions-Policy gesteuert. Speziell, wo eine definierte Richtlinie die Nutzung blockiert, wird jeder Versuch, diese Methoden aufzurufen, fehlschlagen.

Der Standardwerteintragswert fr on-device-speech-recognition ist self. Das bedeutet, dass Sie sich keine Sorgen um die Anpassung der Richtlinie machen mssen, es sei denn, Sie versuchen, diese Methoden in eingebetteten Cross-Origin-Dokumenten zu verwenden oder mchten deren Verwendung explizit deaktivieren.

Festlegen von Anforderungen an die Qualittsstufe

Die Methoden available() und install() untersttzen die quality-Option. Dies ermglicht es Ihnen, die Untersttzung fr verschiedene Komplexittsstufen der Spracherkennung zu berprfen zum Beispiel ist die Verarbeitung kurzer Sprachbefehle viel einfacher als das Handhaben von Diktaten/Transkriptionen, und der erstere Anwendungsfall wird wahrscheinlich von mehr Hardware- und Sprachpaketkombinationen untersttzt als der letztere.

Zum Beispiel ist der folgende Code-Snippet eine Modifikation des Codes aus dem Beispiel On-device Speech Color Changer, in dem wir die available()-Methode mit der auf dictation gesetzten quality-Option aufrufen, um zu berprfen, ob die Spracherkennung auf dem Gert diese Qualittsstufe untersttzt. Wenn das zurckgegebene Ergebnis unavailable ist, setzen wir die Eigenschaft processLocally des SpeechRecognition-Objekts auf false, um die API zu zwingen, einen Cloud-Erkennungsdienst zu verwenden, und starten dann den Erkennungsdienst.

Wenn das Ergebnis available ist, sind wir bereit, also rufen wir einfach start() auf, um die Erkennung auf dem Gert zu starten. Wenn das Ergebnis ein anderer Wert ist, fhren wir die install()-Methode mit der auf dictation gesetzten quality-Option aus, um die erforderlichen Sprachpakete zu installieren.

startBtn.addEventListener("click", () => {
  // Check availability of on-device target language dictation quality
  SpeechRecognition.available({
    langs: ["en-US"],
    processLocally: true,
    quality: "dictation",
  }).then((result) => {
    if (result === "unavailable") {
      diagnostic.textContent = `On-device recognition for dictation not available, running with cloud recognition`;
      recognition.processLocally = false;
      recognition.start();
    } else if (result === "available") {
      recognition.start();
      console.log("Ready to receive a color command.");
    } else {
      diagnostic.textContent = `en-US language pack downloading`;
      SpeechRecognition.install({
        langs: ["en-US"],
        processLocally: true,
        quality: "dictation",
      }).then((result) => {
        if (result) {
          diagnostic.textContent = `en-US language pack downloaded. Try again.`;
        } else {
          diagnostic.textContent = `en-US language pack failed to download. Try again later.`;
        }
      });
    }
  });
});

Kontextuelle Verzerrung in der Spracherkennung

Es wird Zeiten geben, in denen ein Spracherkennungsdienst es nicht schafft, ein bestimmtes Wort oder eine bestimmte Phrase korrekt zu erkennen. Dies passiert am hufigsten bei branchenspezifischen Begriffen (wie medizinischer oder wissenschaftlicher Terminologie), Eigennamen, ungewhnlichen Phrasen oder Wrtern, die anderen Wrtern hnlich klingen und deshalb mglicherweise falsch identifiziert werden.

Zum Beispiel haben wir whrend der Tests festgestellt, dass unser On-device Speech Color Changer Schwierigkeiten hatte, die Farbe azure zu erkennen stndig wurden Ergebnisse wie "as you" zurckgegeben. Andere Farben, die hufig falsch erkannt wurden, waren khaki ("car key"), tan und thistle ("this all").

Um solche Probleme zu mildern, lsst die Web Speech API Sie dem Erkennungs-Engine Hinweise geben, um Phrasen hervorzuheben, die mit grerer Wahrscheinlichkeit gesprochen werden, und auf die die Engine verzerrt werden sollte. Dies macht es wahrscheinlicher, dass diese Wrter und Phrasen korrekt erkannt werden.

Sie knnen dies tun, indem Sie ein Array von SpeechRecognitionPhrase-Objekten als Wert der SpeechRecognition.phrases-Eigenschaft setzen. Jedes SpeechRecognitionPhrase-Objekt enthlt:

• Eine phrase-Eigenschaft, die eine Zeichenkette enthlt, die das zu verstrkende Wort oder die zu verstrkende Phrase enthlt.
• Eine boost-Eigenschaft, die eine Gleitkommazahl zwischen 0.0 und 10.0 (einschlielich) ist, die den Verstrkungsgrad angibt, den Sie auf dieses Wort oder diese Phrase anwenden mchten. Hhere Werte machen das Wort oder die Phrase wahrscheinlicher erkannt.

In unserer "On-device Speech Color Changer"-Demo handhaben wir dies, indem wir ein Array von Phrasen zur Verstrkung und deren Verstrkungswerte erstellen:

const phraseData = [
  { phrase: "azure", boost: 5.0 },
  { phrase: "khaki", boost: 3.0 },
  { phrase: "tan", boost: 2.0 },
];

Diese mssen als ein ObservableArray von SpeechRecognitionPhrase-Objekten dargestellt werden. Wir handhaben dies, indem wir das ursprngliche Array umbilden, um jedes Array-Element mit dem SpeechRecognitionPhrase()-Konstruktor in ein SpeechRecognitionPhrase-Objekt zu konvertieren:

const phraseObjects = phraseData.map(
  (p) => new SpeechRecognitionPhrase(p.phrase, p.boost),
);

Nach dem Erstellen der SpeechRecognition-Instanz fgen wir unsere kontextuellen Verzerrungsphrasen hinzu, indem wir das phraseObjects-Array als Wert der SpeechRecognition.phrases-Eigenschaft setzen:

recognition.phrases = phraseObjects;

Das Phrasen-Array kann wie ein normales JavaScript-Array modifiziert werden, zum Beispiel durch das dynamische Hinzufgen neuer Phrasen:

recognition.phrases.push(new SpeechRecognitionPhrase("thistle", 5.0));

Mit diesem Code stellten wir fest, dass die problematischen Farb-Keywords genauer erkannt wurden als zuvor.

Sprachsynthese

Die Sprachsynthese (auch bekannt als Text-to-Speech, oder TTS) beinhaltet die Synthese eines Textes, der in einer Anwendung enthalten ist, in Sprache und das Abspielen ber die Lautsprecher oder den Audioausgang eines Gerts.

Die Web Speech API hat eine Hauptsteuerungsschnittstelle dafr SpeechSynthesis sowie eine Reihe verwandter Schnittstellen zur Darstellung des zu synthetisierenden Texts (bekannt als uerungen), der Stimmen, die fr die uerung verwendet werden sollen, etc. Auch hier haben die meisten Betriebssysteme eine Art Sprachsynthesesystem, das von der API fr diese Aufgabe verwendet wird, soweit vorhanden.

Demo

Um zu demonstrieren, wie man die Sprachsynthese im Web verwendet, haben wir eine Beispiel-App namens Speech Synthesizer erstellt. Sie verfgt ber ein Eingabefeld zur Eingabe des zu synthetisierenden Texts. Sie knnen die Geschwindigkeit und die Tonhhe anpassen und auch eine Stimme aus dem Dropdown-Men auswhlen, um den gesprochenen Text zu verwenden. Nachdem Sie Ihren Text eingegeben haben, drcken Sie Enter/Return oder klicken Sie auf die Play-Schaltflche, um den Text laut vorlesen zu lassen.

[Benutzeroberflche einer App namens Speak Easy Synthesis. Sie hat ein Eingabefeld, um Text zum Synthetisieren einzugeben, Slider-Steuerelemente, um die Geschwindigkeit und Tonhhe der Sprache zu ndern, und ein Dropdown-Men, um zwischen verschiedenen Stimmen zu whlen.]

Um die Demo auszufhren, navigieren Sie zur Live-Demo-URL in einem untersttzenden Browser.

HTML und CSS

Das HTML und CSS fr diese App sind ziemlich einfach. Es gibt einen Titel, einige Anweisungen zur Nutzung und ein Formular mit grundlegenden Steuerelementen. Das <select>-Element ist anfangs leer; es wird ber JavaScript mit <option>s gefllt (spter behandelt).

<h1>Speech synthesizer</h1>

<p>
  Enter some text in the input below and press return to hear it. Change voices
  using the dropdown menu.
</p>

<form>
  <input type="text" class="txt" />
  <div>
    <label for="rate">Rate</label
    ><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate" />
    <div class="rate-value">1</div>
    <div class="clearfix"></div>
  </div>
  <div>
    <label for="pitch">Pitch</label
    ><input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
    <div class="pitch-value">1</div>
    <div class="clearfix"></div>
  </div>
  <select></select>
</form>

JavaScript

Schauen wir uns das JavaScript an, das diese App antreibt.

Variablen setzen

Zunchst erfassen wir Referenzen auf alle an der Benutzeroberflche beteiligten DOM-Elemente, aber interessanterweise erfassen wir eine Referenz auf Window.speechSynthesis. Dies ist der Einstiegspunkt der API es gibt eine Instanz von SpeechSynthesis zurck, der Steuerungsschnittstelle fr die Sprachsynthese im Web.

const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");

const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");

const voices = [];

Fllen des Select-Elements

Um das <select>-Element mit den verfgbaren Sprachoptionen des Gerts zu fllen, haben wir eine populateVoiceList()-Funktion geschrieben. Zuerst rufen wir SpeechSynthesis.getVoices() auf, das eine Liste aller verfgbaren Stimmen zurckgibt, dargestellt durch SpeechSynthesisVoice-Objekte. Dann durchlaufen wir diese Liste fr jede Stimme erstellen wir ein <option>-Element, setzen seinen Textinhalt, um den Namen der Stimme anzuzeigen (aus SpeechSynthesisVoice.name entnommen), die Sprache der Stimme (aus SpeechSynthesisVoice.lang entnommen) und -- DEFAULT, wenn die Stimme die Standardsprache fr die Synthese-Engine ist (berprft, indem man prft, ob SpeechSynthesisVoice.default true zurckgibt.)

Wir erstellen auch data--Attribute fr jede Option, die den Namen und die Sprache der zugehrigen Stimme enthalten, sodass wir sie spter leicht erfassen knnen, und fgen die Optionen als Kinder des Select-Elements hinzu.

function populateVoiceList() {
  voices = synth.getVoices();

  for (const voice of voices) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.lang})`;

    if (voice.default) {
      option.textContent += "  DEFAULT";
    }

    option.setAttribute("data-lang", voice.lang);
    option.setAttribute("data-name", voice.name);
    voiceSelect.appendChild(option);
  }
}

ltere Browser untersttzen das voiceschanged-Ereignis nicht und geben einfach eine Liste der Stimmen zurck, wenn SpeechSynthesis.getVoices() ausgefhrt wird. Whrend bei anderen, wie Chrome, Sie warten mssen, bis das Ereignis ausgelst wird, bevor die Liste gefllt wird. Um beide Flle zuzulassen, fhren wir die Funktion wie unten gezeigt aus:

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

Sprechen des eingegebenen Texts

Als nchstes erstellen wir einen Ereignishandler, um das Sprechen des in das Textfeld eingegebenen Texts zu starten. Wir verwenden einen onsubmit-Handler auf dem Formular, damit die Aktion ausgefhrt wird, wenn Enter/Return gedrckt wird. Zuerst erstellen wir eine neue SpeechSynthesisUtterance()-Instanz mit dessen Konstruktor. Dieser wird mit dem Wert des Texteingabefelds als Parameter bergeben.

Als nchstes mssen wir herausfinden, welche Stimme verwendet werden soll. Wir verwenden die selectedOptions-Eigenschaft von HTMLSelectElement, um das derzeit ausgewhlte <option>-Element zurckzugeben. Dann verwenden wir das data-name-Attribut dieses Elements und finden das SpeechSynthesisVoice-Objekt, dessen Name mit dem Wert dieses Attributs bereinstimmt. Wir setzen das bereinstimmende Sprachobjekt als Wert fr die SpeechSynthesisUtterance.voice-Eigenschaft.

Schlielich setzen wir die SpeechSynthesisUtterance.pitch und SpeechSynthesisUtterance.rate auf die Werte der entsprechenden Formular-Elemente. Dann, mit allen notwendigen Vorbereitungen, starten wir die uerung, indem wir SpeechSynthesis.speak() aufrufen und die SpeechSynthesisUtterance-Instanz als Parameter bergeben.

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (const voice of voices) {
    if (voice.name === selectedOption) {
      utterThis.voice = voice;
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);
  utterThis.onpause = (event) => {
    const char = event.utterance.text.charAt(event.charIndex);
    console.log(
      `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`,
    );
  };
  inputTxt.blur();
};

Im letzten Teil des Handlers fgen wir ein pause-Ereignis ein, um zu demonstrieren, wie SpeechSynthesisEvent gut verwendet werden kann. Wenn SpeechSynthesis.pause() aufgerufen wird, wird eine Meldung zurckgegeben, die die Zahl und den Namen des Zeichens angibt, bei dem die Sprache pausiert wurde.

Schlielich rufen wir blur() auf dem eingetippten Text auf. Dies dient hauptschlich dazu, die Tastatur auf Firefox OS auszublenden.

Aktualisieren der angezeigten Pitch- und Ratewerte

Der letzte Teil des Codes aktualisiert die in der Benutzeroberflche angezeigten pitch-/rate-Werte, jedes Mal, wenn die Schiebereglerpositionen bewegt werden.

pitch.onchange = () => {
  pitchValue.textContent = pitch.value;
};

rate.onchange = () => {
  rateValue.textContent = rate.value;
};