OfflineAudioContext

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.

* Some parts of this feature may have varying levels of support.

OfflineAudioContext インターフェイスは AudioContext インターフェイスの一種で、 AudioNode をつなげて造られる音声処理グラフを表しています。通常の AudioContext と異なり、OfflineAudioContext で処理された音声はハードウェアから再生されることはありません。処理された結果は AudioBuffer に出力されます。

EventTarget BaseAudioContext OfflineAudioContext

コンストラクター

OfflineAudioContext()

新しい OfflineAudioContext のインスタンスを作成します。

インスタンスプロパティ

親インターフェイスである BaseAudioContext からのプロパティも継承しています。

OfflineAudioContext.length 読取専用

サンプルフレーム数で表されるバッファーの大きさの整数値。

インスタンスメソッド

親インターフェイスである BaseAudioContext からのメソッドも継承しています。

OfflineAudioContext.suspend()

指定した時刻に音声コンテキストの時間進行の停止をスケジューリングし、プロミスを返します。

OfflineAudioContext.startRendering()

現在の接続と現在の変更予定を考慮して、音声のレンダリングを始めます。このページでは、イベントベース版とプロミス版の両方に応じた説明をします。

非推奨のメソッド

OfflineAudioContext.resume()

前回中断した音声の時刻の進行を再開します。

メモ: resume() メソッドはまだ利用できます。これは BaseAudioContext インターフェイスで定義されるようになり（AudioContext.resume を参照）、従って AudioContext および OfflineAudioContext インターフェイスの両方でアクセスできます。

イベント

これらのイベントを addEventListener() で待ち受けするか、イベントハンドラーをこのインターフェイスの onイベント名 プロパティに代入するかしてください。

complete

オフライン音声コンテキストのレンダリングが完了したときに発行されます。

例

この例では、AudioContext と OfflineAudioContext の 2 つのオブジェクトを作っています。AudioContext は XHR の (BaseAudioContext.decodeAudioData)で音声トラックを読み込むのに使い、OfflineAudioContext でAudioBufferSourceNode の中に音声をレンダリングし、そしてその音声を再生します。オフライン音声グラフのセットアップが終わった後、OfflineAudioContext.startRendering を使って AudioBuffer にレンダリングする必要があります。

startRendering() のプロミスが解決されるとレンダリングは完了し、出力結果の AudioBuffer がプロミスの結果として戻されます。

この時点で、別の音声コンテキストを作成し、その中に AudioBufferSourceNode を作成し、そのバッファーをプロミス AudioBuffer と等しくなるように設定します。これは単純な標準音声グラフの一部として再生されます。

メモ: 動作する例については、 offline-audio-context-promise の GitHub リポジトリーを参照してください（ソースコードも参照してください）。

js
// オンラインとオフラインのオーディオコンテキストを定義

const audioCtx = new AudioContext();
const offlineCtx = new OfflineAudioContext(2, 44100 * 40, 44100);

source = offlineCtx.createBufferSource();

// XHRで音声トラックを読み込み、
// decodeAudioData でデコードして OfflineAudioContext で再生する。

function getData() {
  request = new XMLHttpRequest();

  request.open("GET", "viper.ogg", true);

  request.responseType = "arraybuffer";

  request.onload = () => {
    const audioData = request.response;

    audioCtx.decodeAudioData(audioData, (buffer) => {
      myBuffer = buffer;
      source.buffer = myBuffer;
      source.connect(offlineCtx.destination);
      source.start();
      //source.loop = true;
      offlineCtx
        .startRendering()
        .then((renderedBuffer) => {
          console.log("Rendering completed successfully");
          const song = audioCtx.createBufferSource();
          song.buffer = renderedBuffer;

          song.connect(audioCtx.destination);

          play.onclick = () => {
            song.start();
          };
        })
        .catch((err) => {
          console.error(`Rendering failed: ${err}`);
          // 注意: OfflineAudioContext の startRendering が二回以上呼び出されるとプロミスは拒否されます。
        });
    });
  };

  request.send();
}

// getData で処理を開始する。

getData();

仕様書

Specification
Web Audio API
# OfflineAudioContext

ブラウザーの互換性

BCD tables only load in the browser

関連情報