AudioContext.decodeAudioData()

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

構文

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

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

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

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

例

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

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

この例では、getData()関数はオーディオトラックを読み込むためにXMLHttpRequestを使っています。responseTypeにarraybufferを設定してリクエストします。その結果、responseはArrayBufferを返し、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

通常はXMLHttpRequestのresponseTypeにarraybufferを設定し、responseから獲得します。

DecodeSuccessCallback

デコードが完了すると呼ばれるコールバック関数。コールバック関数の引数は1つで、デコードされたオーディオデータが書き込まれたAudioBufferです。通常はデコードされたデータは、再生や操作をするためにAudioBufferSourceNodeに渡します。

DecodeErrorCallback Optional

(任意) エラーコールバック。オーディオデータのデコードでエラーが発生すると呼ばれます。

戻り値

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

仕様

ブラウザ互換性

参考

• Using the Web Audio API