AudioBufferSourceNode: playbackRate 属性

基线 广泛可用

此功能已经成熟，可以在许多设备和浏览器版本上正常使用。它自 2021 年 4 月.

报告反馈

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

规范

js
Web Audio API
# 规范

浏览器兼容性

dom-audiobuffersourcenode-playbackrate

另请参阅