AudioBufferSourceNode: playbackRate 屬性

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

playbackRate 屬性是 AudioBufferSourceNode 介面的一個 k-rate AudioParam，它定義了音訊資源播放的速度。

值為 1.0 表示以其取樣率相同的速度播放，小於 1.0 的值會導致聲音播放得更慢，而大於 1.0 的值則會導致音訊播放得比正常快。預設值為 1.0。當設定為其他值時，AudioBufferSourceNode 會在將音訊傳送到輸出之前對其進行重取樣。

值

一個 AudioParam，其 value 是一個浮點值，表示音訊的播放速率，以原始取樣率的十進位制比例表示。

考慮一個包含以 44.1 kHz（每秒 44,100 個樣本）取樣的音訊的音訊緩衝區。讓我們看看 playbackRate 的幾個值會產生什麼效果。

playbackRate 為 1.0 時，音訊以全速播放，即 44,100 Hz。
playbackRate 為 0.5 時，音訊以半速播放，即 22,050 Hz。
playbackRate 為 2.0 時，音訊的播放速率加倍到 88,200 Hz。

示例

設定 `playbackRate`

在此示例中，當用戶按下“播放”按鈕時，我們將載入一個音軌，對其進行解碼，然後將其放入 AudioBufferSourceNode 中。

然後，該示例將 loop 屬性設定為 true，以便音軌迴圈播放。

使用者可以使用滑塊控制元件來設定 playbackRate 屬性。

注意：您可以線上執行完整示例（或檢視原始碼）。

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;
};