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() の定義
草案

ブラウザーの互換性

BCD tables only load in the browser

関連情報