AudioBufferSourceNode: playbackRate プロパティ

Baseline Widely available

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

playbackRate は AudioBufferSourceNode インターフェイスのプロパティで、 このプロパティは、音声資産の再生速度を定義する k-rate AudioParam です。

1.0 の値は、そのサンプリングレートと同じ速度で再生することを示し、 1.0 より小さい値は、よりゆっくりと、1.0 より大きい値は、通常より速く音声を再生することになります。既定値は 1.0 です。 他の値に設定された場合、AudioBufferSourceNode は出力に送る前に音声を再サンプリングします。

値

この 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 の設定

この例では、ユーザーが "Play" を押すと、音声トラックを読み込んでデコードし、AudioBufferSourceNode に入れます。

例えば、この例では loop プロパティを true に設定し、トラックがループして再生されるようにしています。

ユーザーは、playbackRate プロパティを範囲コントロールを使用して設定することができます。

メモ: 実際に動作する例を見る (または、ソースコードを見る)ことができます。

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

仕様書

Specification
Web Audio API
# dom-audiobuffersourcenode-playbackrate

ブラウザーの互換性

BCD tables only load in the browser

関連情報