BaseAudioContext: createBufferSource() メソッド

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.

createBufferSource()BaseAudioContext インターフェイスのメソッドで、新しい AudioBufferSourceNode を作成するために使用します。これは AudioBuffer オブジェクトに含まれる音声データを再生するために使用されます。 AudioBufferBaseAudioContext.createBuffer で生成さされたり、音声トラックのデコードに成功したときに BaseAudioContext.decodeAudioData から返されたりします。

メモ: AudioBufferSourceNode() コンストラクターは、 AudioBufferSourceNode を作成するための推奨される方法です。 AudioNode の作成を参照してください。

構文

js
createBufferSource()

引数

なし。

返値

この例では、 2 秒間のバッファーを作成してホワイトノイズで満たし、 AudioBufferSourceNode で再生しています。コメントでは、何が起こっているのかを簡単に説明しています。

メモ: コードをライブで実行したり、ソースを閲覧したりすることもできます。

js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const button = document.querySelector("button");
const pre = document.querySelector("pre");
const myScript = document.querySelector("script");

pre.innerHTML = myScript.innerHTML;

// ステレオ
const channels = 2;
// AudioContext のサンプリングレートで 2 秒間の
// 空のステレオバッファーを生成する
const frameCount = audioCtx.sampleRate * 2.0;

const myArrayBuffer = audioCtx.createBuffer(
  channels,
  frameCount,
  audioCtx.sampleRate,
);

button.onclick = () => {
  // バッファーにホワイトノイズを書き込む
  // -1.0 から 1.0 の間の乱数の値
  for (let channel = 0; channel < channels; channel++) {
    // 実際のデータの配列を得る
    const nowBuffering = myArrayBuffer.getChannelData(channel);
    for (let i = 0; i < frameCount; i++) {
      // Math.random() は [0; 1.0] である
      // 音声は [-1.0; 1.0] である必要がある
      nowBuffering[i] = Math.random() * 2 - 1;
    }
  }

  // AudioBufferSourceNode を得る
  // これは AudioBuffer を再生するときに使う AudioNode である
  const source = audioCtx.createBufferSource();
  // AudioBufferSourceNode にバッファーを設定する
  source.buffer = myArrayBuffer;
  // AudioBufferSourceNode を出力先に接続すると
  // 音声が聞こえるようになる
  source.connect(audioCtx.destination);
  // 音源の再生を始める
  source.start();
};

仕様書

Specification
Web Audio API
# dom-baseaudiocontext-createbuffersource

ブラウザーの互換性

BCD tables only load in the browser

関連情報