OfflineAudioContext: Methode startRendering()
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 startRendering()
-Methode der OfflineAudioContext
-Schnittstelle beginnt mit dem Rendern des Audio-Graphs, wobei die aktuellen Verbindungen und die geplanten Änderungen berücksichtigt werden.
Das complete
-Ereignis (vom Typ OfflineAudioCompletionEvent
) wird ausgelöst, wenn das Rendern abgeschlossen ist und enthält den resultierenden AudioBuffer
in seiner renderedBuffer
-Eigenschaft.
Browser unterstützen derzeit zwei Versionen der startRendering()
-Methode — eine ältere ereignisbasierte Version und eine neuere versprechenbasierte Version. Erstere wird schließlich entfernt, aber derzeit werden beide Mechanismen aus Kompatibilitätsgründen bereitgestellt.
Syntax
startRendering()
Parameter
Keine.
Rückgabewert
Ein Promise
, das mit einem AudioBuffer
erfüllt wird.
Beispiele
Audio mit einem Offline-Audio-Kontext abspielen
In diesem Beispiel deklarieren wir sowohl ein AudioContext
- als auch ein OfflineAudioContext
-Objekt. Wir verwenden das AudioContext
, um einen Audiotrack mit fetch()
zu laden, dann das OfflineAudioContext
, um das Audio in einen AudioBufferSourceNode
zu rendern und den Track abzuspielen. Nachdem der Offline-Audio-Graph eingerichtet ist, rendern wir ihn mit OfflineAudioContext.startRendering()
in einen AudioBuffer
.
Wenn das startRendering()
-Versprechen aufgelöst wird, ist das Rendern abgeschlossen und der ausgegebene AudioBuffer
wird aus dem Versprechen zurückgegeben.
An diesem Punkt erstellen wir einen weiteren Audio-Kontext, erstellen darin einen AudioBufferSourceNode
, und setzen dessen Puffer gleich dem Versprechen AudioBuffer
. Dies wird dann als Teil eines einfachen Standard-Audio-Graphs abgespielt.
Hinweis: Sie können das vollständige Beispiel live ausprobieren, oder den Quellcode ansehen.
// Define both online and offline audio contexts
let audioCtx; // Must be initialized after a user interaction
const offlineCtx = new OfflineAudioContext(2, 44100 * 40, 44100);
// Define constants for dom nodes
const play = document.querySelector("#play");
function getData() {
// Fetch an audio track, decode it and stick it in a buffer.
// Then we put the buffer into the source and can play it.
fetch("viper.ogg")
.then((response) => response.arrayBuffer())
.then((downloadedBuffer) => audioCtx.decodeAudioData(downloadedBuffer))
.then((decodedBuffer) => {
console.log("File downloaded successfully.");
const source = new AudioBufferSourceNode(offlineCtx, {
buffer: decodedBuffer,
});
source.connect(offlineCtx.destination);
return source.start();
})
.then(() => offlineCtx.startRendering())
.then((renderedBuffer) => {
console.log("Rendering completed successfully.");
play.disabled = false;
const song = new AudioBufferSourceNode(audioCtx, {
buffer: renderedBuffer,
});
song.connect(audioCtx.destination);
// Start the song
song.start();
})
.catch((err) => {
console.error(`Error encountered: ${err}`);
});
}
// Activate the play button
play.onclick = () => {
play.disabled = true;
// We can initialize the context as the user clicked.
audioCtx = new AudioContext();
// Fetch the data and start the song
getData();
};
Spezifikationen
Specification |
---|
Web Audio API # dom-offlineaudiocontext-startrendering |
Browser-Kompatibilität
BCD tables only load in the browser