Signatur
Beschreibung
Die Eigenschaft rate legt fest, wie schnell die Sprachsynthese eine Äußerung (SpeechSynthesisUtterance) spricht. Der Wert ist ein Multiplikator, der sich auf die normale Geschwindigkeit der gewählten Stimme bezieht: 1 ist das Standardtempo, 2 doppelt so schnell, 0.5 halb so schnell. Gültig sind Werte von 0.1 bis 10.
Typische Anwendungsfälle sind Barrierefreiheit (Nutzer mit Screenreader-Erfahrung bevorzugen oft ein höheres Tempo), Sprachlern-Anwendungen (langsames, deutliches Vorlesen) und Vorlesefunktionen für Artikel mit einem Geschwindigkeitsregler.
Wichtig: Die Eigenschaft muss vor dem Aufruf von speechSynthesis.speak() gesetzt werden. Eine Änderung während der laufenden Ausgabe wirkt sich in den meisten Browsern nicht auf die aktuelle Äußerung aus. Die tatsächliche Geschwindigkeit hängt zudem von der Sprach-Engine und der Stimme ab. Manche Engines unterstützen nur einen engeren Bereich und begrenzen größere Werte stillschweigend.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | 1 | Beim Setzen: Geschwindigkeitsfaktor zwischen 0.1 (sehr langsam) und 10 (sehr schnell). 1 ist das normale Tempo der Stimme. |
Rückgabewert
1.Beispiele
Text langsam vorlesen
const utterance = new SpeechSynthesisUtterance('Guten Morgen, wie geht es dir?');
utterance.lang = 'de-DE';
utterance.rate = 0.7; // etwas langsamer als normal
console.log(utterance.rate);
speechSynthesis.speak(utterance);Geschwindigkeitsregler für eine Vorlesefunktion
// HTML: <input type="range" id="rate" min="0.5" max="2" step="0.1" value="1">
// <button id="vorlesen">Vorlesen</button>
const rateInput = document.querySelector('#rate');
const button = document.querySelector('#vorlesen');
button.addEventListener('click', () => {
speechSynthesis.cancel(); // laufende Ausgabe beenden
const text = document.querySelector('article').textContent;
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';
utterance.rate = Number(rateInput.value);
speechSynthesis.speak(utterance);
});Tempo während der Wiedergabe ändern (Neustart nötig)
let current = null;
const speakWithRate = (text, rate) => {
speechSynthesis.cancel();
current = new SpeechSynthesisUtterance(text);
current.rate = Math.min(10, Math.max(0.1, rate)); // auf gültigen Bereich begrenzen
current.addEventListener('start', () => console.log(`Spreche mit Tempo ${current.rate}`));
speechSynthesis.speak(current);
};
speakWithRate('Dies ist ein Test.', 1);
// Später schneller: neu starten statt current.rate zu ändern
setTimeout(() => speakWithRate('Dies ist ein Test.', 1.8), 1500);// Wichtig · Fallstricke
- Kein Effekt während der Ausgabe: Wenn du
ratenachspeechSynthesis.speak()änderst, wirkt sich das auf die laufende Äußerung meist nicht aus. Beende sie mitspeechSynthesis.cancel()und starte sie neu. - Werte außerhalb des Bereichs: Laut Spezifikation sind nur Werte von
0.1bis10gültig. Je nach Browser wird bei anderen Werten ein Fehler geworfen oder der Wert stillschweigend begrenzt. Begrenze ihn deshalb selbst. - Engine-Abhängigkeit: Viele Stimmen (vor allem Netzwerk-Stimmen in Chrome, z. B. „Google Deutsch“) unterstützen praktisch nur etwa
0.1bis2. Höhere Werte klingen dann nicht schneller. - Gleitkomma-Genauigkeit: Der Wert wird intern als
floatgespeichert. Beim Auslesen erhältst du daher z. B.0.699999988079071statt0.7. - Browser-Kompatibilität: Die Sprachsynthese wird von allen modernen Browsern unterstützt. Welche Stimmen und welches Verhalten es gibt, hängt aber vom Betriebssystem ab. Prüfe vorher mit
'speechSynthesis' in window, ob die API verfügbar ist.