BaseAudioContext.decodeAudioData()
decodeAudioData()
は BaseAudioContext
のメソッドで、 ArrayBuffer
に書き込まれた音声ファイルデータを非同期にデコードするために使用されます。この場合、 ArrayBuffer
は XMLHttpRequest
と FileReader
から読み込まれます。デコードされた AudioBuffer
は AudioContext
のサンプリングレートにリサンプリングされ、コールバックやプロミスに渡されます。
この方法は、オーディオトラックからウェブオーディオ API 用のオーディオソースを作成する際に推奨される方法です。この方法は、音声ファイルの断片的なデータではなく、完全なファイルデータに対してのみ動作します。
構文
// 古いコールバックの構文:
decodeAudioData(arrayBuffer, successCallback)
decodeAudioData(arrayBuffer, successCallback, errorCallback)
// 新しいプロミスベースの構文:
decodeAudioData(arrayBuffer)
引数
- arrayBuffer
-
デコードする音声データが入った ArrayBuffer です。通常は
XMLHttpRequest
,fetch()
,FileReader
から取得します。 - successCallback
-
デコードが完了すると呼び出されるコールバック関数です。このコールバックの引数は 1 つで、
AudioBuffer
であり decodedData (デコードされた PCM 音声データ)を表します。通常は、デコードされたデータをAudioBufferSourceNode
に入れて、そこから再生したり、好きなように操作したりすることができます。 - errorCallback 省略可
-
任意のエラーコールバックで、音声データのデコードでエラーが発生すると呼び出されます。
返値
なし、または decodedData で履行される Promise
オブジェクトです。
例
ここでは最初に古いコールバックベースのシステムを、次に新しいプロミスベースの構文を取り上げます。
古いコールバックベースの構文
この例では、 getData()
関数は XHR を使用して音声トラックを読み込み、リクエストの responseType
を arraybuffer
に設定して、レスポンスとして配列バッファーを返すようにして、それを 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) {
// デコードしたデータをここで使う
});
仕様書
Specification |
---|
Web Audio API # dom-baseaudiocontext-decodeaudiodata |
ブラウザーの互換性
BCD tables only load in the browser