Web Audio `playbackRate` erklärt

Lassen Sie uns mit einem kurzen Beispiel zur Verwendung von playbackRate beginnen:

const audio = document.createElement("audio");
audio.setAttribute("src", "audio-file.mp3");
audio.playbackRate = 0.5;

Hier erstellen wir ein <audio> Element und setzen dessen src auf eine Datei unserer Wahl. Als Nächstes setzen wir playbackRate auf 0.5, was die halbe normale Geschwindigkeit darstellt (die playbackRate ist ein Multiplikator, der auf die Originalrate angewendet wird).

Als erstes erstellen wir ein <video> Element und richten Video- und Wiedergabegeschwindigkeitssteuerungen in HTML ein:

<video id="myVideo" controls loop>
  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />
</video>

<form>
  <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" />
  <p>Playback Rate <span id="currentPbr">1</span></p>
</form>

Ein wenig grundlegendes CSS:

form {
  font-family: monospace;
}

video {
  width: 500px;
  aspect-ratio: 16 / 9;
}

Und etwas JavaScript dazu:

const v = document.getElementById("myVideo");
const p = document.getElementById("pbr");
const c = document.getElementById("currentPbr");

p.addEventListener(
  "input",
  () => {
    c.textContent = p.value;
    v.playbackRate = p.value;
  },
  false,
);

Schließlich hören wir auf das input-Ereignis, das auf dem <input> Element ausgelöst wird, damit wir auf die Änderung der Wiedergabegeschwindigkeit reagieren können.

Zusätzlich zu playbackRate haben wir auch eine defaultPlaybackRate-Eigenschaft zur Verfügung, die es uns ermöglicht, die Standard-Wiedergabegeschwindigkeit festzulegen: die Geschwindigkeit, auf die das Medium zurückgesetzt wird; zum Beispiel, wenn wir die Quelle des Videos ändern oder (in einigen Browsern) wenn ein ended-Ereignis generiert wird.

Also erlaubt uns defaultPlaybackRate, die Wiedergabegeschwindigkeit vor dem Abspielen des Mediums einzustellen, während playbackRate es uns ermöglicht, sie während der Medienwiedergabe zu ändern.

Es gibt auch ein Ereignis namens ratechange, das jedes Mal ausgelöst wird, wenn sich playbackRate ändert.

• Die meisten Browser stoppen die Audiowiedergabe außerhalb der playbackRate-Grenzen von 0.5 und 4, wodurch das Video stumm weiterläuft. Für die meisten Anwendungen wird empfohlen, den Bereich auf zwischen 0.5 und 4 zu begrenzen.
• Die Tonhöhe der Audio-Spur ändert sich nicht, wenn playBackRate geändert wird.
• Negative Werte, die anzeigen, dass das Medium rückwärts abgespielt werden soll, werden von den meisten Browsern derzeit nicht unterstützt.

• Hyperaudio's Playback Rate Test
• HTMLMediaElement: Schnittstelle, die die playbackRate-Eigenschaft definiert.