Web Speech
-
20min
- mittel
Die Web Speech API ermöglicht eine Sprachausgabe in Webseiten oder Apps. Die Web Speech API[1][2] besteht aus zwei Teilen:
- SpeechSynthesis (Text-to-Speech-Sprachausgabe)
- SpeechRecognition (Asynchrone Spracherkennung.)
Inhaltsverzeichnis
SpeechSynthesis
Während sprechende Computer wie HAL aus „2001“ einst für eine ferne Zukunft standen, ist Spracheingabe und -erkennung für Computer mit SIRI (Speech Interpretation and Recognition Interface) für iOS, OK Google für Android oder Gemini heutzutage kein Problem mehr.
Die SpeechSynthesis API wird von allen modernen Browsern unterstützt und benötigt nur wenige Zeilen JavaScript. Mit ihr kann man beliebigen Text in einer Sprache nach Wahl über den Lautsprecher ausgeben. Diese Sprachausgabe (text-to-speech) ist flexibler als die Verwendung von gespeicherten Audio-Dateien.
utterance vs text
Der Begriff Text bezeichnet im nichtwissenschaftlichen Sprachgebrauch eine meist schriftliche sprachliche Äußerung. Für die Sprachausgabe verwendet die Spezifikation den Term utterance (engl. für Äußerung).
var utterance = new SpeechSynthesisUtterance('Hallo Welt');
window.speechSynthesis.speak(utterance);
function speak() {
var msg = new SpeechSynthesisUtterance();
msg.text = 'Hello my friend';
msg.lang = 'en-US';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.onend = function(e) {
document.querySelector('#output').innerText = (event.elapsedTime/1000) + ' Sek';
};
speechSynthesis.speak(msg);
}
Im Beispiel wird mit new ein neues SpeechSynthesisUtterance-Objekt erzeugt. Dieses enthält mehrere Eigenschaften
- unseren Text,
-
lang: eine Sprachangabe -
volume: Lautstärke (Standardwert 1) -
rate: Geschwindigkeit (Standardwert 1) -
pitch: Tonhöhe (Standardwert 1)
Bei einem Klick auf den Button wird der Text mit speak() ausgegeben. Am Ende der Sprachausgabe wird die Dauer über elapsedTime berechnet und formatiert ausgegeben.
getVoices()
Für die Sprachausgabe benötigt man die passenden Sprachpakete. Ob die Internationalisierung durch die Abfrage der eingestellten Sprache des Browsers (Sprachauswahl mittels Accept Language) oder durch ein Menü erfolgt, ist dem Programmierer überlassen.
Mit der SpeechSynthesis.getVoices()-Methode[5] kannst du eine Liste der verfügbaren Sprachen zur Auswahl über ein select-Menü anbieten:
const voiceSelect = document.querySelector('#voice');
const speakButton = document.querySelector('#speak');
let voices = [];
function populateVoices() {
voices = speechSynthesis.getVoices();
voiceSelect.innerHTML = '';
voices.forEach((voice, index) => {
const option = document.createElement('option');
option.value = index;
option.textContent = `${voice.name} (${voice.lang})`;
if (voice.default) {
option.textContent += ' [Default]';
}
voiceSelect.appendChild(option);
});
}
speechSynthesis.speak(utterance);
});
Über die SpeechSynthesis.getVoices() werden alle verfügbaren Stimmen ermittelt und der Variablen voices zugeordnet. In einer ForEach-Schleife wird für jede Stimme ein option-Element angelegt und Name und Sprache der Stimme mit textContent eingefügt.
Mit einem Klick auf den speak-Button wird der Text von der gewählten Stimme gesprochen.
What's the Time?
Im SVG-Einstiegs-Tutorial gibt es eine SVG-Uhr, die eigentlich nur zeigen soll, dass man eine Uhr nur mit SVG und CSS betreiben kann - nur zum Stellen der aktuellen Zeit benötigt man wenige Zeilen JavaScript.
Für den Anfangsunterricht der 5. Klasse in Englisch sollen nach dem Zufallsprinzip Uhrzeiten erzeugt und angezeigt werden. Dabei wird die aktuelle Uhrzeit in englischer Sprache ausgegeben.
const repetition = 5;
let current = 0;
function newTime() {
let number = 0;
if (current <= repetition) {
number = 0;
} else if (current <= (repetition * 2)) {
// Move to 15-minute intervals
const quarters = [0, 15, 30, 45];
number = quarters[rand(0, quarters.length - 1)];
} else if (current <= (repetition * 4)) {
// Move to 5-minute intervals
const intervals = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
number = intervals[rand(0, intervals.length - 1)];
} else {
number = rand(0, 59);
}
const newHour = rand(0, 11);
svg.style.setProperty('--start-seconds', 0);
svg.style.setProperty('--start-minutes', number);
svg.style.setProperty('--start-hours', newHour);
const readableTime = generateTimeString(newHour, number);
console.log(readableTime);
const utterance = new SpeechSynthesisUtterance(readableTime);
utterance.lang = 'en-US';
speakButton.disabled = true;
utterance.onend = function () {
speakButton.disabled = false;
};
speechSynthesis.speak(utterance);
current++;
}
Bei jedem Aufruf von newTime() wird eine neue Uhrzeit ermittelt und dann die Zählvariable current inkrementiert. In den ersten Durchläufen werden nur volle Stunden, in der zweiten Stufe Viertelstunden und dann durch 5 teilbare Minuten-Intervalle ausgegeben.
Anschließend wird die Uhrzeit vorgelesen.
SpeechRecognition
Zweiter Teil der Web Speech API ist die Speech Recognition (englisch für Spracherkennung). Obwohl (oder gerade weil) es mit Siri und Alexa kommerzielle Produkte mit diesem Verfahren gibt, ist die Browserunterstützung noch nicht durchgehend gegeben.
Während Google Chrome bis auf einige Eigenschaften alles unterstützt, fehlen bei Edge und Opera die dazu passenden Events. Bei Safari muss Siri aktiviert sein; der Firefox versteckt SpeechRecognition noch hinter einem flag; einige Methoden sind aber noch nicht implementiert. (Stand: Januar 2025).
David Walsh hat eine Demo: JavaScript Speech Recognition, die englische Sprache gut in Text umwandeln kann.[6]
Weblinks
- ↑ W3C: Web Speech API Specification
- ↑ MDN: Web Speech API
- ↑ In der ersten Version des Artikels (Sept. 2018) gab es mit Firefox auf Win7 Home Premium nur englische Sprecher.
- support.microsoft.com: Windows 7-Sprachpakete standen für Computer mit Windows 7 Ultimate oder Windows 7 Enterprise zur Verfügung
- ↑ MDN: SpeechSynthesisUtterance.text
- ↑ MDN: SpeechSynthesis.getVoices()
- ↑ JavaScript Speech Recognition (davidwalsh.name)
