AudioContext.decodeAudioData()

インターフェースのdecodeAudioData()メソッドは、ArrayBufferに書き込まれたオーディオファイルデータを非同期にデコードするために使われます。この場合、ArrayBufferは、通常はXMLHttpRequestresponseTypearraybufferを設定して、response属性を読み込んで取得します。

これはオーディオトラックからWeb Audio APIで音源を生成するよい方法です。

構文

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

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

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

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

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

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

この例では、getData()関数はオーディオトラックを読み込むためにXMLHttpRequestを使っています。responseTypearraybufferを設定してリクエストします。その結果、responseArrayBufferを返し、audioBuffer変数に格納されます。そしてそのバッファをdecodeAudioData()関数に渡します。そのコールバックがデコードされたPCMデータを受け取れば、AudioContext.createBufferSource()で生成したAudioBufferSourceNodeに渡し、sourceをAudioContext.destinationに接続してループさせます。

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

注: コードの実行(とソースの閲覧)もできます。

// 変数の定義

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でデコードし、bufferに格納する
// そして、そのbufferをsourceに設定する

function getData() {
  source = audioCtx.createBufferSource();
  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){"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(compressedBuffer).then(function(decodedData) {
 // デコードしたデータをここで使う
});

引数

ArrayBuffer
通常はXMLHttpRequestresponseTypearraybufferを設定し、responseから獲得します。
DecodeSuccessCallback
デコードが完了すると呼ばれるコールバック関数。コールバック関数の引数は1つで、デコードされたオーディオデータが書き込まれたAudioBufferです。通常はデコードされたデータは、再生や操作をするためにAudioBufferSourceNodeに渡します。
DecodeErrorCallback Optional
(任意) エラーコールバック。オーディオデータのデコードでエラーが発生すると呼ばれます。

戻り値

AudioBufferで表されたデコードされたPCMオーディオデータ

仕様

Specification Status Comment
Web Audio API
The definition of 'decodeAudioData()' in that specification.
草案  

ブラウザ互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0webkit 25.0 (25.0)  未サポート 15.0webkit
22 (unprefixed)
6.0webkit
Promise-based syntax (有) (有) 未サポート (有) (有)
Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? 26.0 1.2 ? ? ? 33.0
Promise-based syntax ? (有) (有) 未サポート ? ? (有)

参考

ドキュメントのタグと貢献者

 このページの貢献者: maruhiro
 最終更新者: maruhiro,