BaseAudioContext.state — Eigenschaft · JavaScript-Referenz

Signatur

BaseAudioContext.state

Beschreibung

Die schreibgeschützte Eigenschaft state von BaseAudioContext gibt an, in welchem Zustand sich ein AudioContext oder OfflineAudioContext gerade befindet. Mögliche Werte sind:

"suspended": Der Kontext ist angehalten. Die Audio-Zeit (currentTime) läuft nicht weiter, es wird nichts verarbeitet. Das passiert z. B. nach suspend() oder weil der Browser wegen der Autoplay-Regeln eine Benutzerinteraktion verlangt.
"running": Der Kontext verarbeitet Audio.
"closed": Der Kontext wurde mit close() geschlossen, seine Ressourcen sind freigegeben. Er kann nicht wieder gestartet werden.

Die Eigenschaft braucht man vor allem, um mit der Autoplay-Sperre umzugehen: Viele Browser erzeugen einen neuen AudioContext im Zustand "suspended", solange der Nutzer noch nicht mit der Seite interagiert hat. Wenn Sie state prüfen, wissen Sie, ob Sie resume() in einem Klick-Handler aufrufen müssen. Außerdem lassen sich damit Bedienelemente (Play/Pause) synchron zum tatsächlichen Zustand halten.

Jede Zustandsänderung löst das Ereignis statechange aus. Man reagiert darauf mit addEventListener("statechange", …) oder über die Eigenschaft onstatechange, statt state regelmäßig abzufragen.

Rückgabewert

Typ

"suspended" | "running" | "closed" (string)

Beschreibung

Eine Zeichenkette mit dem aktuellen Zustand des Audio-Kontexts. Einige Safari-Versionen können zusätzlich "interrupted" liefern (siehe Hinweise).

Beispiele

Zustand abfragen und Autoplay-Sperre aufheben

const ctx = new AudioContext();
console.log(ctx.state); // oft "suspended" ohne vorherige Interaktion

document.querySelector('#start').addEventListener('click', async () => {
  if (ctx.state === 'suspended') {
    await ctx.resume();
  }
  console.log('Zustand nach Klick:', ctx.state);
});

suspended Zustand nach Klick: running

Play/Pause-Schalter über statechange synchron halten

const ctx = new AudioContext();
const button = document.querySelector('#toggle');

const updateButton = () => {
  button.textContent = ctx.state === 'running' ? 'Pause' : 'Abspielen';
  button.disabled = ctx.state === 'closed';
};

ctx.addEventListener('statechange', () => {
  console.log('Neuer Zustand:', ctx.state);
  updateButton();
});
// Alternative: ctx.onstatechange = updateButton;

button.addEventListener('click', async () => {
  if (ctx.state === 'running') {
    await ctx.suspend();
  } else if (ctx.state === 'suspended') {
    await ctx.resume();
  }
});

updateButton();

Neuer Zustand: running Neuer Zustand: suspended

Kontext sicher schließen

const closeAudio = async (ctx) => {
  if (ctx.state !== 'closed') {
    await ctx.close();
  }
  console.log(ctx.state);
};

const ctx = new AudioContext();
closeAudio(ctx);

closed

Zustand eines OfflineAudioContext beim Rendern

const offline = new OfflineAudioContext(2, 44100, 44100);
const osc = new OscillatorNode(offline, { frequency: 440 });
osc.connect(offline.destination);
osc.start();

console.log('Vorher:', offline.state);
const buffer = await offline.startRendering();
console.log('Nachher:', offline.state, buffer.duration);

Vorher: suspended Nachher: closed 1

// Wichtig · Fallstricke

Autoplay-Regeln: Chrome, Firefox und Safari starten einen Kontext ohne vorherige Benutzerinteraktion häufig im Zustand "suspended". Rufen Sie resume() deshalb in einem Ereignis-Handler auf, der durch eine Benutzeraktion ausgelöst wird (z. B. click). Außerhalb davon bleibt das Promise evtl. unerfüllt oder der Zustand ändert sich nicht.
Asynchrone Änderung: Nach resume(), suspend() oder close() ändert sich state nicht sofort. Warten Sie auf das Promise oder auf das Ereignis statechange.
Endgültig geschlossen: Ein Kontext mit "closed" lässt sich nicht wieder starten. resume() lehnt dann mit einem InvalidStateError ab, und Sie müssen einen neuen Kontext erzeugen.
Safari/iOS: WebKit kennt zusätzlich den nicht standardisierten Zustand \"interrupted\" (z. B. bei eingehendem Anruf oder Wechsel in den Hintergrund). Behandeln Sie unbekannte Werte robust, etwa wie \"suspended\".
OfflineAudioContext: Der Zustand ist zunächst \"suspended\", während startRendering() \"running\" und danach \"closed\".
Die Eigenschaft ist schreibgeschützt. Wenn Sie ihr etwas zuweisen, hat das keine Wirkung (im Strict Mode gibt es einen TypeError).

Siehe auch

BaseAudioContext.listener BaseAudioContext.sampleRate BaseAudioContext.destination BaseAudioContext.currentTime BaseAudioContext.audioWorklet