BaseAudioContext: Methode decodeAudioData()
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.
Die Methode decodeAudioData() des Interfaces BaseAudioContext wird verwendet, um Audiodateidaten asynchron zu dekodieren, die in einem ArrayBuffer enthalten sind und über fetch(), XMLHttpRequest oder FileReader geladen wurden. Der dekodierte AudioBuffer wird auf die Abtastrate des AudioContext umgerechnet und anschließend an einen Callback übergeben oder als Ergebnis eines Promise bereitgestellt.
Dies ist die bevorzugte Methode, um aus einer Audiospur eine Audioquelle für die Web Audio API zu erstellen. Die Methode funktioniert nur mit vollständigen Audiodateidaten, nicht mit Fragmenten davon.
Diese Funktion bietet zwei Möglichkeiten, Audiodaten oder Fehlermeldungen asynchron zurückzugeben: Sie gibt ein Promise zurück, das mit den Audiodaten erfüllt wird, und akzeptiert außerdem Callback-Argumente für den Erfolgs- und Fehlerfall. Die bevorzugte Verwendung erfolgt über den Promise-Rückgabewert; die Callback-Parameter werden aus Gründen der Abwärtskompatibilität bereitgestellt.
Syntax
// 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 mit den zu dekodierenden Audiodaten, die üblicherweise über
fetch(),XMLHttpRequestoderFileReadergeladen wurden. successCallbackOptional-
Eine Callback-Funktion, die aufgerufen wird, wenn die Dekodierung erfolgreich abgeschlossen ist. Ihr einziges Argument ist ein
AudioBuffer, der die decodedData (die dekodierten PCM-Audiodaten) enthält. Üblicherweise werden die dekodierten Daten in einenAudioBufferSourceNodeeingefügt, über den sie nach Bedarf wiedergegeben und bearbeitet werden können. errorCallbackOptional-
Ein optionaler Fehler-Callback, der aufgerufen wird, wenn bei der Dekodierung der Audiodaten ein Fehler auftritt.
Rückgabewert
Ein Promise-Objekt, das mit 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 wird zuerst die Promise-basierte Syntax und danach die Callback-Syntax behandelt.
Promise-basierte Syntax
In diesem Beispiel ruft loadAudio() mit fetch() eine Audiodatei ab und dekodiert sie in einen AudioBuffer. Anschließend speichert die Funktion den audioBuffer für die spätere Wiedergabe in der globalen Variablen buffer.
Hinweis: Sie können das vollständige Beispiel ausführen oder den Quellcode ansehen.
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}`);
}
}
play.addEventListener("click", async () => {
if (!audioCtx) {
audioCtx = new AudioContext();
await loadAudio();
}
// …
});
Callback-Syntax
In diesem Beispiel ruft loadAudio() mit fetch() eine Audiodatei ab und dekodiert sie mithilfe der Callback-basierten Variante von decodeAudioData() in einen AudioBuffer. Im Callback wird der dekodierte Buffer wiedergegeben.
Hinweis: Sie können das vollständige Beispiel ausführen oder den Quellcode ansehen.
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}`);
}
}
play.addEventListener("click", async () => {
if (!audioCtx) {
audioCtx = new AudioContext();
await loadAudio();
} else {
playBuffer();
}
});
Spezifikationen
| Spezifikation |
|---|
| Web Audio API # dom-baseaudiocontext-decodeaudiodata |