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.

playbackRateAudioBufferSourceNode インターフェイスのプロパティで、 このプロパティは、音声資産の再生速度を定義する 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
playbackRate

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報