AudioContext.decodeAudioData()

decodeAudioData()BaseAudioContext のメソッドで、 ArrayBuffer に書き込まれた音声ファイルデータを非同期にデコードするために使用されます。この場合、 ArrayBufferXMLHttpRequestFileReader から読み込まれます。デコードされた AudioBufferAudioContext のサンプリングレートにリサンプリングされ、コールバックやプロミスに渡されます。

この方法は、オーディオトラックから Web Audio API 用のオーディオソースを作成する際に推奨される方法です。この方法は、音声ファイルの断片的なデータではなく、完全なファイルデータに対してのみ動作します。

構文

古いコールバック構文:

baseAudioContext.decodeAudioData(ArrayBuffer, successCallback, errorCallback);

新しいプロミスベースの構文:

Promise<decodedData> baseAudioContext.decodeAudioData(ArrayBuffer);

引数

ArrayBuffer
デコードする音声データが入った ArrayBuffer です。通常はXMLHttpRequest, WindowOrWorkerGlobalScope.fetch(), FileReader から取得します。
successCallback
デコードが完了すると呼び出されるコールバック関数です。このコールバックの引数は1つで、 decodedData (デコードされた PCM 音声データ) を表す AudioBuffer です。通常は、デコードされたデータを AudioBufferSourceNode に入れて、そこから再生したり、好きなように操作したりすることができます。
errorCallback
任意のエラーコールバックで、音声データのデコードでエラーが発生すると呼び出されます。

返値

なし、または decodedData で満足する Promise オブジェクトで.

ここでは最初に古いコールバックベースのシステムを、次に新しいプロミスベースの構文を取り上げます。

古いコールバックベースの構文

この例では、 getData() 関数は XHR を使用して音声トラックを読み込み、リクエストの responseTypearraybuffer に設定して、レスポンスとして配列バッファーを返すようにして、それを audioData 変数に格納しています。それからこのバッファーを decodeAudioData() 関数に渡します。成功したコールバックは、デコードに成功した PCM データを受け取り、 AudioContext.createBufferSource() で作成した AudioBufferSourceNode に入れ、ソースを AudioContext.destination に接続してループするように設定します。

ボタンは単に getData() を実行して、それぞれトラックの読み込みと再生、停止を行うだけです。ソースの stop() メソッドが呼ばれると、ソースは消滅します。

注: ライブ例の実行 (またはソースの閲覧) もできます。

// 変数の定義

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source;

var pre = document.querySelector('pre');
var myScript = document.querySelector('script');
var play = document.querySelector('.play');
var stop = document.querySelector('.stop');

// 音声トラックの読み込みには XHR を使い、
// decodeAudioData でデコードし、バッファーに格納する
// そして、そのバッファーを source に設定する

function getData() {
  source = audioCtx.createBufferSource();
  var request = new XMLHttpRequest();

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

  request.responseType = 'arraybuffer';


  request.onload = function() {
    var audioData = request.response;

    audioCtx.decodeAudioData(audioData, function(buffer) {
        source.buffer = buffer;

        source.connect(audioCtx.destination);
        source.loop = true;
      },

      function(e){ console.log("Error with decoding audio data" + e.err); });

  }

  request.send();
}

// 音声の停止と再生を行うボタン

play.onclick = function() {
  getData();
  source.start(0);
  play.setAttribute('disabled', 'disabled');
}

stop.onclick = function() {
  source.stop(0);
  play.removeAttribute('disabled');
}


// pre要素にスクリプトを設定する

pre.innerHTML = myScript.innerHTML;

新しいプロミスベースの構文

ctx.decodeAudioData(audioData).then(function(decodedData) {
 // デコードしたデータをここで使う
});

仕様書

仕様 状態 備考
Web Audio API
decodeAudioData() の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
decodeAudioDataChrome 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 ≤18Firefox 完全対応 53
補足
完全対応 53
補足
補足 Originally implemented on AudioContext in Firefox 25.
IE 未対応 なしOpera 完全対応 22
完全対応 22
完全対応 15
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Safari 完全対応 6
接頭辞付き
完全対応 6
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
WebView Android 完全対応 ありChrome Android 完全対応 33Firefox Android 完全対応 53
補足
完全対応 53
補足
補足 Originally implemented on AudioContext in Firefox Android 26.
Opera Android 完全対応 22
完全対応 22
完全対応 14
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Safari iOS 完全対応 6
接頭辞付き
完全対応 6
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Samsung Internet Android 完全対応 2.0
Promise-based syntaxChrome 完全対応 49Edge 完全対応 ≤79Firefox 完全対応 53
補足
完全対応 53
補足
補足 Originally implemented on AudioContext in Firefox 36.
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 完全対応 53
補足
完全対応 53
補足
補足 Originally implemented on AudioContext in Firefox Android 36.
Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報