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 に書き込まれた音声ファイルデータを非同期にデコードするために使用されます。この場合、ArrayBuffer は fetch()、XMLHttpRequest、FileReader などから読み込まれます。デコードされた AudioBuffer は AudioContext のサンプリングレートにリサンプリングされ、コールバックやプロミスに渡されます。

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

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

構文

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

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

引数

arrayBuffer

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

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報