Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

Audio bei Tabwechsel pausieren

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Beim Tabbed-Browsing besteht eine große Wahrscheinlichkeit, dass sich eine bestimmte Webseite im Hintergrund befindet und somit für den Benutzer nicht sichtbar ist. Die Seitensichtbarkeits-API liefert Ereignisse, die Sie beobachten können, um zu wissen, wann ein Dokument sichtbar oder verborgen wird …
Anmerkung: Die Seitensichtbarkeits-API ist besonders nützlich, um Ressourcen zu sparen und die Leistung zu verbessern, indem eine Seite unnötige Aufgaben vermeiden kann, wenn das Dokument nicht sichtbar ist.

Quelle: MDN web docs

Hier eine Demo mit einem (Endlos-)Audio. Das Audio starten, dann zu einem anderen Browser-Tab wechseln, und das Audio stoppt. Das Ganze würde natürlich auch mit einem Video, einer Slideshow o.ä. funktionieren.


Das JavaScript

<script> var audio1 = document.getElementsByTagName("audio")[0]; document.addEventListener("visibilitychange", function() { if (document.visibilityState === 'visible') { audio1.play(); } else { audio1.pause(); } }); </script>

Creative Commons Lizenzvertrag

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

Kommentare

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat