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 プロパティを範囲コントロールを使用して設定することができます。
メモ: 実際に動作する例を見る (または、ソースコードを見る)ことができます。
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 |