Signatur
Beschreibung
Mit der Eigenschaft volume eines SpeechSynthesisUtterance-Objekts legst du fest, wie laut der Text über speechSynthesis.speak() vorgelesen wird. Der Wert ist eine Gleitkommazahl von 0 (stumm) bis 1 (volle Lautstärke). Voreingestellt ist 1.
Die Lautstärke gilt relativ zur System- bzw. Tab-Lautstärke. Mit 1 wird also die aktuell eingestellte Geräte-Lautstärke erreicht, nicht mehr. Nutzen kannst du das zum Beispiel für leise Hinweise, für einen Lautstärkeregler in Vorlese-Funktionen oder dafür, Sprachausgaben an die übrige Audio-Mischung einer Anwendung anzupassen.
Setze den Wert vor dem Aufruf von speechSynthesis.speak(). Änderst du ihn, während die Äußerung schon gesprochen wird oder in der Warteschlange steht, hat das in den meisten Browsern keine Wirkung mehr. Für eine neue Lautstärke musst du die Ausgabe abbrechen und neu starten.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | 1 | Neue Lautstärke beim Setzen, Gleitkommazahl zwischen 0 und 1. |
Rückgabewert
0 und 1. Standardwert ist 1.Beispiele
Text mit halber Lautstärke vorlesen
const utterance = new SpeechSynthesisUtterance('Willkommen auf programmierung.net!');
utterance.lang = 'de-DE';
utterance.volume = 0.5; // halbe Lautstärke
console.log(utterance.volume);
speechSynthesis.speak(utterance);Lautstärkeregler für eine Vorlese-Funktion
// HTML: <input type="range" id="vol" min="0" max="1" step="0.1" value="0.8">
// <button id="read">Vorlesen</button>
const slider = document.querySelector('#vol');
const button = document.querySelector('#read');
button.addEventListener('click', () => {
speechSynthesis.cancel(); // laufende Ausgabe beenden
const text = document.querySelector('article')?.textContent ?? 'Kein Text gefunden.';
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';
utterance.volume = Number(slider.value);
speechSynthesis.speak(utterance);
});Standardwert und Wertebereich prüfen
const clampVolume = (v) => Math.min(1, Math.max(0, Number(v) || 0));
const u = new SpeechSynthesisUtterance('Test');
console.log(u.volume); // Standard
u.volume = clampVolume(1.7);
console.log(u.volume);
u.volume = clampVolume(-3);
console.log(u.volume);// Wichtig · Fallstricke
- Werte außerhalb von 0–1: Laut Spezifikation soll ein Wert außerhalb des Bereichs einen Fehler auslösen. Die Browser verhalten sich hier aber unterschiedlich: Manche kappen den Wert, andere ignorieren ihn. Begrenze ihn deshalb am besten selbst, etwa mit
Math.min/Math.max. - Keine Änderung während der Wiedergabe: Setzt du
volumenachspeak(), wirkt sich das meist nicht mehr auf die laufende Äußerung aus. - Stimmenabhängig: Einige Stimmen, besonders Remote- und Systemstimmen (z. B. bei
localService === false), sowie manche mobilen Plattformen wie iOS Safari ignorierenvolumeganz oder teilweise. - Relativ zur Systemlautstärke: Mit
1kannst du die Systemlautstärke nicht überschreiten. Mit0läuft die Ausgabe trotzdem ab, und Ereignisse wieendwerden weiterhin ausgelöst. - Kompatibilität: Die Web Speech API (Sprachsynthese) wird von Chrome, Edge, Firefox und Safari unterstützt. Prüfe die Unterstützung vorher mit
'speechSynthesis' in window. In manchen Browsern ist für die Ausgabe eine Nutzerinteraktion nötig, zum Beispiel ein Klick.