AudioBufferSourceNode: playbackRate-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die playbackRate-Eigenschaft des AudioBufferSourceNode-Interfaces ist ein k-rate-AudioParam, das die Geschwindigkeit definiert, mit der das Audio wiedergegeben wird.

Ein Wert von 1,0 zeigt an, dass es mit der gleichen Geschwindigkeit wie seine Abtastrate abgespielt werden soll. Werte unter 1,0 führen dazu, dass der Klang langsamer abgespielt wird, während Werte über 1,0 dazu führen, dass das Audio schneller als normal abgespielt wird. Der Standardwert ist 1.0. Wenn ein anderer Wert gesetzt wird, resampelt der AudioBufferSourceNode das Audio, bevor es zum Ausgang gesendet wird.

Wert

Ein AudioParam, dessen value ein Gleitkommawert ist, der die Wiedergabegeschwindigkeit des Audios als dezimaler Anteil der ursprünglichen Abtastrate angibt.

Betrachten Sie einen Soundpuffer, der Audio enthält, das mit 44,1 kHz (44.100 Samples pro Sekunde) abgetastet wurde. Sehen wir uns an, was einige Werte von playbackRate bewirken:

  • Ein playbackRate von 1,0 spielt das Audio mit voller Geschwindigkeit ab, also 44.100 Hz.
  • Ein playbackRate von 0,5 spielt das Audio mit halber Geschwindigkeit ab, also 22.050 Hz.
  • Ein playbackRate von 2,0 verdoppelt die Wiedergabegeschwindigkeit des Audios auf 88.200 Hz.

Beispiele

Festlegen von playbackRate

In diesem Beispiel laden wir, wenn der Benutzer "Play" drückt, einen Audiotrack, decodieren ihn und platzieren ihn in einem AudioBufferSourceNode.

Das Beispiel setzt dann die loop-Eigenschaft auf true, sodass der Track in Schleife abgespielt wird, und spielt den Track ab.

Der Benutzer kann die playbackRate-Eigenschaft mit einem Bereichssteuerelement festlegen.

Hinweis: Sie können das vollständige Beispiel live ausführen (oder den Quellcode ansehen.)

js
let audioCtx;
let buffer;
let source;

const play = document.getElementById("play");
const stop = document.getElementById("stop");

const playbackControl = document.getElementById("playback-rate-control");
const playbackValue = document.getElementById("playback-rate-value");

async function loadAudio() {
  try {
    // Load an audio file
    const response = await fetch("rnb-lofi-melody-loop.wav");
    // Decode it
    buffer = await audioCtx.decodeAudioData(await response.arrayBuffer());
  } catch (err) {
    console.error(`Unable to fetch the audio file. Error: ${err.message}`);
  }
}

play.addEventListener("click", async () => {
  if (!audioCtx) {
    audioCtx = new AudioContext();
    await loadAudio();
  }
  source = audioCtx.createBufferSource();
  source.buffer = buffer;
  source.connect(audioCtx.destination);
  source.loop = true;
  source.playbackRate.value = playbackControl.value;
  source.start();
  play.disabled = true;
  stop.disabled = false;
  playbackControl.disabled = false;
});

stop.addEventListener("click", () => {
  source.stop();
  play.disabled = false;
  stop.disabled = true;
  playbackControl.disabled = true;
});

playbackControl.oninput = () => {
  source.playbackRate.value = playbackControl.value;
  playbackValue.textContent = playbackControl.value;
};

Spezifikationen

Specification
Web Audio API
# dom-audiobuffersourcenode-playbackrate

Browser-Kompatibilität

Siehe auch