AudioContext.decodeAudioData()

decodeAudioData()BaseAudioContext (en-US) のメソッドで、 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 (en-US) オブジェクトで.

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

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

この例では、 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

関連情報