BaseAudioContext: Methode 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.

Die decodeAudioData()-Methode des BaseAudioContext-Interfaces wird verwendet, um Audiodateidaten, die in einem ArrayBuffer enthalten sind und von fetch(), XMLHttpRequest oder FileReader geladen wurden, asynchron zu decodieren. Der decodierte AudioBuffer wird auf die Abtastrate des AudioContext umgesampelt und dann an einen Callback oder ein Versprechen übergeben.

Dies ist die bevorzugte Methode, um eine Audioquelle für die Web Audio API aus einem Audiotrack zu erstellen. Diese Methode funktioniert nur mit vollständigen Dateidaten, nicht mit Fragmenten von Audiodateidaten.

Diese Funktion implementiert zwei alternative Möglichkeiten, um die Audiodaten oder Fehlermeldungen asynchron zurückzugeben: Sie gibt ein Promise zurück, das mit den Audiodaten erfüllt wird, und akzeptiert auch Callback-Argumente, um Erfolg oder Misserfolg zu behandeln. Die primäre Methode zur Verwendung dieser Funktion ist über den Promise-Rückgabewert, und die Callback-Parameter werden aus Kompatibilitätsgründen bereitgestellt.

Syntax

js
// Promise-based syntax returns a Promise:
decodeAudioData(arrayBuffer)

// Callback syntax has no return value:
decodeAudioData(arrayBuffer, successCallback)
decodeAudioData(arrayBuffer, successCallback, errorCallback)

Parameter

arrayBuffer

Ein ArrayBuffer, der die zu decodierenden Audiodaten enthält, normalerweise abgerufen von fetch(), XMLHttpRequest oder FileReader.

successCallback Optional

Eine Callback-Funktion, die aufgerufen wird, wenn die Decodierung erfolgreich abgeschlossen ist. Das einzige Argument für diesen Callback ist ein AudioBuffer, der die decodedData (die decodierten PCM-Audiodaten) darstellt. Üblicherweise möchten Sie die decodierten Daten in einen AudioBufferSourceNode einfügen, von dem sie abgespielt und nach Belieben bearbeitet werden können.

errorCallback Optional

Ein optionaler Fehler-Callback, der aufgerufen wird, wenn ein Fehler bei der Decodierung der Audiodaten auftritt.

Rückgabewert

Ein Promise-Objekt, das mit den decodedData erfüllt wird. Wenn Sie die XHR-Syntax verwenden, ignorieren Sie diesen Rückgabewert und verwenden stattdessen eine Callback-Funktion.

Beispiele

In diesem Abschnitt behandeln wir zuerst die Syntax basierend auf Promises und dann die Callback-Syntax.

Promise-basierte Syntax

In diesem Beispiel verwendet loadAudio() fetch(), um eine Audiodatei abzurufen und sie in einen AudioBuffer zu decodieren. Anschließend wird der audioBuffer im globalen buffer-Variable für die spätere Wiedergabe zwischengespeichert.

Hinweis: Sie können das vollständige Beispiel live ausführen oder den Quellcode ansehen.

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}`);
  }
}

Callback-Syntax

In diesem Beispiel verwendet loadAudio() fetch(), um eine Audiodatei abzurufen und sie mit der rückrufbasierten Version von decodeAudioData() in einen AudioBuffer zu decodieren. Im Callback wird der decodierte Buffer abgespielt.

Hinweis: Sie können das vollständige Beispiel live ausführen oder den Quellcode ansehen.

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}`);
  }
}

Spezifikationen

Specification
Web Audio API
# dom-baseaudiocontext-decodeaudiodata

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch