Signatur
Beschreibung
Die Eigenschaft playbackRate ist ein number-Wert, der angibt, wie schnell das Medium relativ zur normalen Geschwindigkeit abgespielt wird. 1.0 entspricht der Originalgeschwindigkeit, 0.5 der halben und 2.0 der doppelten Geschwindigkeit. Die Änderung wirkt sofort, auch während der laufenden Wiedergabe.
Typische Einsatzfälle sind Geschwindigkeitsregler in Video-Playern, Lernplattformen, Podcast-Apps (schnelleres Anhören) oder Zeitlupe bei Sportanalysen. Bei jeder Änderung löst das Element das Ereignis ratechange aus, auf das man z. B. zur Aktualisierung der Oberfläche reagieren kann.
Der Wert wird bei einem neuen Ladevorgang (load() oder Wechsel von src) auf defaultPlaybackRate zurückgesetzt. Wer eine vom Nutzer gewählte Geschwindigkeit dauerhaft behalten möchte, sollte deshalb zusätzlich defaultPlaybackRate setzen oder den Wert nach loadedmetadata erneut zuweisen.
Standardmäßig bleibt die Tonhöhe bei geänderter Geschwindigkeit erhalten; das lässt sich über preservesPitch steuern. Browser schalten den Ton bei extremen Werten (etwa unter 0.25 oder über 4.0) häufig stumm.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | 1.0 | Beim Setzen: neuer Geschwindigkeitsfaktor. 1.0 = normal, Werte < 1 verlangsamen, Werte > 1 beschleunigen. Negative Werte (Rückwärtswiedergabe) werden von den meisten Browsern nicht unterstützt. |
Rückgabewert
1).Beispiele
Geschwindigkeit lesen und setzen
const video = document.querySelector('video');
console.log(video.playbackRate); // Standardwert
video.playbackRate = 1.5; // 1,5-fache Geschwindigkeit
console.log(video.playbackRate);Geschwindigkeitsregler mit Auswahlliste
// HTML: <video id="player" src="kurs.mp4" controls></video>
// <select id="speed"><option>0.5</option><option selected>1</option><option>1.25</option><option>1.5</option><option>2</option></select>
const player = document.getElementById('player');
const speed = document.getElementById('speed');
speed.addEventListener('change', () => {
const rate = Number(speed.value);
player.playbackRate = rate;
player.defaultPlaybackRate = rate; // bleibt nach neuem Laden erhalten
});
player.addEventListener('ratechange', () => {
console.log(`Neue Geschwindigkeit: ${player.playbackRate}x`);
});Gewählte Geschwindigkeit speichern und robust setzen
const audio = document.querySelector('audio');
const saved = Number(localStorage.getItem('podcastRate')) || 1;
const setRate = (rate) => {
try {
audio.playbackRate = rate;
localStorage.setItem('podcastRate', String(rate));
} catch (err) {
// z. B. NotSupportedError bei nicht unterstützten Werten
console.warn('Geschwindigkeit nicht unterstützt:', rate, err.name);
}
};
audio.addEventListener('loadedmetadata', () => setRate(saved));
// Tastenkürzel: + / - ändern die Geschwindigkeit in 0,25er-Schritten
document.addEventListener('keydown', (e) => {
if (e.key === '+') setRate(Math.min(audio.playbackRate + 0.25, 4));
if (e.key === '-') setRate(Math.max(audio.playbackRate - 0.25, 0.25));
});// Wichtig · Fallstricke
- Zurücksetzen beim Laden: Nach
load()oder einer neuensrcgilt wiederdefaultPlaybackRate. Die gewünschte Geschwindigkeit also auch dort setzen. - Wertebereich: Browser setzen eigene Grenzen (Firefox und Chrome etwa
0.0625bis16). Werte außerhalb davon lösen eineNotSupportedError-DOMExceptionaus. Negative Werte funktionieren praktisch nirgends zuverlässig. - Ton: Bei sehr niedrigen oder hohen Werten schalten viele Browser den Ton stumm. Die Tonhöhe bleibt standardmäßig erhalten (
preservesPitch, in älteren Versionen mit PräfixmozPreservesPitchoderwebkitPreservesPitch). - Wert 0:
playbackRate = 0wird in einigen Browsern abgelehnt oder verhält sich uneinheitlich. Zum Anhalten besserpause()verwenden. - Die Eigenschaft wird in allen modernen Browsern unterstützt; bei Streams (z. B. MSE/HLS) kann eine hohe Geschwindigkeit zu Pufferproblemen führen.