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

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

この例では、AudioContextOfflineAudioContext の 2 つのオブジェクトを作っています。AudioContext は XHR の (BaseAudioContext.decodeAudioData)で音声トラックを読み込むのに使い、OfflineAudioContextAudioBufferSourceNode の中に音声をレンダリングし、そしてその音声を再生します。オフライン音声グラフのセットアップが終わった後、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

ブラウザーの互換性

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
OfflineAudioContext
OfflineAudioContext() constructor
options parameter (accepts all parameters as a single dictionary)
complete event
length
resume
startRendering
Returns a Promise
suspend

Legend

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

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報