OfflineAudioContext

OfflineAudioContext()

Erstellt eine neue Instanz von OfflineAudioContext.

Erbt auch Eigenschaften von seinem Eltern-Interface, BaseAudioContext.

OfflineAudioContext.length Nur lesbar

Ein ganzzahliger Wert, der die Größe des Puffers in Sample-Frames darstellt.

Erbt auch Methoden von seinem Eltern-Interface, BaseAudioContext.

OfflineAudioContext.suspend()

Plant eine Aussetzung des Zeitfortschritts im Audiokontext zu der angegebenen Zeit und gibt ein Promise zurück.

OfflineAudioContext.startRendering()

Startet das Rendering des Audios unter Berücksichtigung der aktuellen Verbindungen und der aktuell geplanten Änderungen. Diese Seite behandelt sowohl die ereignisbasierte als auch die auf Versprechungen basierende Version.

OfflineAudioContext.resume()

Nimmt den Zeitfortschritt in einem Audiokontext, der zuvor ausgesetzt wurde, wieder auf.

Diese Ereignisse können Sie mit addEventListener() abhören oder einen Ereignis-Listener auf die oneventname-Eigenschaft dieses Interfaces zuweisen:

complete

Wird ausgelöst, wenn das Rendering eines Offline-Audiokontextes abgeschlossen ist.

In diesem Beispiel deklarieren wir sowohl ein AudioContext als auch ein OfflineAudioContext-Objekt. Wir verwenden den AudioContext, um einen Audiotrack mit fetch() zu laden, und 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 in einen AudioBuffer mit OfflineAudioContext.startRendering().

Wenn das Promise startRendering() aufgelöst wird, ist das Rendering abgeschlossen und der ausgegebene AudioBuffer wird aus dem Promise zurückgegeben.

An diesem Punkt erstellen wir einen weiteren Audiokontext, erstellen einen AudioBufferSourceNode darin und setzen seinen Puffer gleich dem Promise-AudioBuffer. Dies wird dann als Teil eines einfachen Standard-Audio-Graphs abgespielt.

// 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();
};

• Verwendung der Web Audio API