Signatur
Beschreibung
Mit resume() wechselt ein AudioContext aus dem Zustand "suspended" zurück nach "running". Ab diesem Moment läuft currentTime wieder weiter, und alle angeschlossenen Audioknoten werden verarbeitet und an das Ausgabegerät geschickt.
Die Methode braucht man in der Praxis vor allem wegen der Autoplay-Richtlinien der Browser: Ein AudioContext, der ohne Benutzerinteraktion erzeugt wird, startet oft im Zustand "suspended". Erst wenn resume() in einem Ereignis-Handler aufgerufen wird, der durch eine echte Benutzeraktion ausgelöst wurde (z. B. click, keydown, pointerup), gibt der Browser die Audioausgabe frei.
Außerdem ist resume() das Gegenstück zu AudioContext.suspend(): So lässt sich die Audioverarbeitung vorübergehend anhalten, um CPU und Akku zu schonen, etwa wenn ein Spiel pausiert oder der Tab in den Hintergrund wechselt, und später ohne Neuaufbau des Audiographen fortsetzen.
Das zurückgegebene Promise wird erfüllt, sobald der Kontext tatsächlich läuft. Den aktuellen Zustand liest man über AudioContext.state aus. Auf Zustandswechsel reagiert man mit dem Ereignis statechange.
Rückgabewert
undefined erfüllt wird, sobald der Kontext wieder läuft. Es wird mit einem InvalidStateError (DOMException) abgelehnt, wenn der Kontext bereits geschlossen ist (state === "closed").Beispiele
Audio nach Benutzerklick freischalten (Autoplay-Richtlinie)
const ctx = new AudioContext();
console.log('Startzustand:', ctx.state); // oft "suspended"
document.querySelector('#start').addEventListener('click', async () => {
if (ctx.state === 'suspended') {
await ctx.resume();
}
console.log('Zustand nach Klick:', ctx.state);
// Kurzen Testton abspielen
const osc = ctx.createOscillator();
osc.frequency.value = 440;
osc.connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 0.5);
});Pause/Weiter-Schalter mit suspend() und resume()
const ctx = new AudioContext();
const button = document.querySelector('#toggle');
button.addEventListener('click', async () => {
if (ctx.state === 'running') {
await ctx.suspend();
button.textContent = 'Weiter';
} else if (ctx.state === 'suspended') {
await ctx.resume();
button.textContent = 'Pause';
}
console.log(`Zustand: ${ctx.state}, Zeit: ${ctx.currentTime.toFixed(2)} s`);
});Beim Wechsel in den Hintergrund pausieren und danach fortsetzen
const ctx = new AudioContext();
ctx.addEventListener('statechange', () => {
console.log('Neuer Zustand:', ctx.state);
});
document.addEventListener('visibilitychange', async () => {
try {
if (document.hidden) {
await ctx.suspend();
} else {
await ctx.resume();
}
} catch (err) {
// z. B. InvalidStateError, wenn der Kontext bereits geschlossen wurde
console.error('Zustandswechsel fehlgeschlagen:', err.name);
}
});Geschlossenen Kontext abfangen
const ctx = new AudioContext();
await ctx.close();
try {
await ctx.resume();
} catch (err) {
console.log(err.name);
}// Wichtig · Fallstricke
- Benutzeraktion nötig: Wird
resume()außerhalb einer Benutzerinteraktion aufgerufen, bleibt das Promise in Chrome und Safari eventuell unerfüllt, bis eine Interaktion stattfindet. Es wird nicht zwingend abgelehnt. Den Aufruf also direkt in einenclick- oderkeydown-Handler legen und nicht auf ein Promise warten, das außerhalb davon entsteht. - Geschlossene Kontexte: Nach
close()lässt sich ein Kontext nicht mehr fortsetzen.resume()lehnt dann mitInvalidStateErrorab, und man muss einen neuenAudioContexterzeugen. - Safari/iOS: Hier kann der Zustand
"interrupted"auftreten, z. B. bei einem Telefonanruf. Auch dann braucht esresume(), oft erst nach einer erneuten Benutzeraktion. Ältere Safari-Versionen brauchen das PräfixwebkitAudioContext. - Nicht für OfflineAudioContext:
OfflineAudioContexthat eine eigeneresume()-Methode mit anderer Bedeutung (Fortsetzen nach einem zeitgesteuertensuspend(time)). - Ein Aufruf bei laufendem Kontext ist unschädlich: Das Promise wird einfach erfüllt.
- Browser-Kompatibilität: Chrome 41+, Firefox 40+, Safari 9+, Edge 14+.