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

js
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.

js
// 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

Siehe auch