AudioContext.close() — Methode · JavaScript-Referenz

Signatur

AudioContext.prototype.close()

Beschreibung

close() beendet einen AudioContext dauerhaft: Die Audio-Hardware wird freigegeben, die Zeitachse (currentTime) bleibt stehen und alle angeschlossenen Knoten verstummen. Nach erfolgreichem Schließen steht state auf "closed", und das Ereignis statechange wird ausgelöst.

Die Methode ist wichtig, weil Browser die Anzahl gleichzeitig offener Audio-Kontexte begrenzen und ein offener Kontext CPU, Speicher und Akku beansprucht. Man ruft sie auf, wenn eine Komponente (z. B. ein Player, Synthesizer oder eine Visualisierung) nicht mehr gebraucht wird – etwa beim Unmount in React/Vue oder beim Verlassen einer Seite in einer Single-Page-App.

Anders als suspend() ist close() nicht umkehrbar: Ein geschlossener Kontext kann nicht wieder fortgesetzt werden. Neue Knoten lassen sich darauf zwar teilweise noch erzeugen, sie produzieren aber keinen Ton. Für erneute Wiedergabe muss ein neuer AudioContext angelegt werden.

Rückgabewert

Typ

Promise<void>

Beschreibung

Ein Promise, das mit undefined erfüllt wird, sobald der Kontext geschlossen ist. Es wird mit einem InvalidStateError abgelehnt, wenn der Kontext bereits geschlossen ist (bzw. bei OfflineAudioContext, das close() nicht unterstützt).

Beispiele

Kontext nach Wiedergabe schließen

const ctx = new AudioContext();
const osc = ctx.createOscillator();
osc.frequency.value = 440;
osc.connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 1);

osc.addEventListener('ended', async () => {
  await ctx.close();
  console.log('Status:', ctx.state);
});

Status: closed

Sicheres Aufräumen in einer Player-Komponente

class TonePlayer {
  #ctx = new AudioContext();

  async beep(freq = 880) {
    if (this.#ctx.state === 'suspended') await this.#ctx.resume();
    const osc = this.#ctx.createOscillator();
    osc.frequency.value = freq;
    osc.connect(this.#ctx.destination);
    osc.start();
    osc.stop(this.#ctx.currentTime + 0.2);
  }

  async destroy() {
    // Doppeltes Schließen vermeiden (würde InvalidStateError werfen)
    if (this.#ctx.state !== 'closed') {
      await this.#ctx.close();
    }
  }
}

const player = new TonePlayer();
document.querySelector('#beep').addEventListener('click', () => player.beep());
window.addEventListener('pagehide', () => player.destroy());

Fehlerbehandlung und statechange-Ereignis

const ctx = new AudioContext();
ctx.addEventListener('statechange', () => {
  console.log('Neuer Zustand:', ctx.state);
});

await ctx.close();

try {
  await ctx.close(); // zweiter Aufruf
} catch (err) {
  console.log(err.name);
}

Neuer Zustand: closed InvalidStateError

// Wichtig · Fallstricke

Endgültig: Nach close() ist resume() wirkungslos bzw. schlägt fehl. Für eine Pause stattdessen suspend() verwenden.
Doppelter Aufruf: Ein erneutes close() auf einem geschlossenen Kontext lehnt das Promise mit InvalidStateError ab – vorher ctx.state prüfen.
OfflineAudioContext besitzt keine close()-Methode; er endet automatisch nach startRendering().
Ressourcenlimits: Ältere Chrome-Versionen erlaubten nur ca. 6 gleichzeitige Kontexte. Nicht geschlossene Kontexte (z. B. bei jedem Komponenten-Mount neu erzeugt) führen schnell zu Fehlern – besser einen Kontext wiederverwenden oder konsequent schließen.
Verbundene MediaStream-Quellen (Mikrofon) werden durch close() nicht gestoppt; die Tracks separat mit track.stop() beenden.
Kompatibilität: In allen aktuellen Browsern verfügbar; sehr alte Safari-Versionen benötigten das Präfix webkitAudioContext.

Siehe auch

AudioContext BaseAudioContext.state AudioContext.suspend() AudioContext.resume() OfflineAudioContext Request.textStream()