BaseAudioContext: decodeAudioData() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

decodeAudioData()BaseAudioContext のメソッドで、 ArrayBuffer に書き込まれた音声ファイルデータを非同期にデコードするために使用されます。この場合、ArrayBufferfetch()XMLHttpRequestFileReader などから読み込まれます。デコードされた AudioBufferAudioContext のサンプリングレートにリサンプリングされ、コールバックやプロミスに渡されます。

この方法は、オーディオトラックからウェブオーディオ API 用のオーディオソースを作成する際に推奨される方法です。この方法は、音声ファイルの断片的なデータではなく、完全なファイルデータに対してのみ動作します。

この関数は、音声データやエラーメッセージを非同期に返す 2 つの方法を実装しています。音声データで履行された Promise を返し、成功や失敗を処理するコールバック引数も受け入れます。この関数とのインターフェイスの主なメソッドは Promise の返値で、コールバック引数は古い理由から指定されたものです。

構文

js
// 古いコールバックの構文:
decodeAudioData(arrayBuffer)

// 新しいプロミスベースの構文:
decodeAudioData(arrayBuffer, successCallback)
decodeAudioData(arrayBuffer, successCallback, errorCallback)

引数

arrayBuffer

デコードする音声データが入った ArrayBuffer です。通常は fetch()XMLHttpRequestFileReader から取得します。

successCallback 省略可

デコードが完了すると呼び出されるコールバック関数です。このコールバックの引数は 1 つで、 AudioBuffer であり decodedData (デコードされた PCM 音声データ)を表します。通常は、デコードされたデータを AudioBufferSourceNode に入れて、そこから再生したり、好きなように操作したりすることができます。

errorCallback 省略可

任意のエラーコールバックで、音声データのデコードでエラーが発生すると呼び出されます。

返値

decodedData で履行される Promise オブジェクトです。XHR 構文を用いる場合は、この返値を無視し、代わりにコールバック関数を使用してください。

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

プロミスベースの構文

この例では、 loadAudio()fetch() を使用して音声ファイルを取得し、それを AudioBuffer にデコードします。そして、後で再生できるように audioBuffer をグローバル変数 buffer にキャッシュします。

メモ: 完全な例をライブで実行したり、ソースを表示したりすることができます。

js
let audioCtx;
let buffer;
let source;

async function loadAudio() {
  try {
    // Load an audio file
    const response = await fetch("viper.mp3");
    // Decode it
    buffer = await audioCtx.decodeAudioData(await response.arrayBuffer());
  } catch (err) {
    console.error(`Unable to fetch the audio file. Error: ${err.message}`);
  }
}

コールバックの構文

この例では loadAudio()fetch() を用いて音声ファイルを取得し、コールバックベースの decodeAudioData() を用いて AudioBuffer にデコードします。コールバックでは、デコードしたバッファーが再生されます。

メモ: 完全な例をライブで実行したり、ソースを表示したりすることができます。

js
let audioCtx;
let source;

function playBuffer(buffer) {
  source = audioCtx.createBufferSource();
  source.buffer = buffer;
  source.connect(audioCtx.destination);
  source.loop = true;
  source.start();
}

async function loadAudio() {
  try {
    // Load an audio file
    const response = await fetch("viper.mp3");
    // Decode it
    audioCtx.decodeAudioData(await response.arrayBuffer(), playBuffer);
  } catch (err) {
    console.error(`Unable to fetch the audio file. Error: ${err.message}`);
  }
}

仕様書

Specification
Web Audio API
# dom-baseaudiocontext-decodeaudiodata

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
decodeAudioData
Returns a Promise

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報