Sounds mit CSS abspielen

CSS ist die Domäne von Styling, Layout und Präsentation. Es ist voller Farben, Größen und Animationen. Aber wussten Sie, dass es auch steuern kann, wann ein Sound auf einer Webseite abgespielt wird?

In diesem Artikel geht es um einen kleinen Trick, um das zu bewerkstelligen. Es ist eigentlich eine strenge Implementierung von HTML und CSS, also ist es kein echter Hack. Aber... seien wir ehrlich, es ist immer noch eine Art Hack. Ich würde nicht unbedingt empfehlen, es in der Produktion zu verwenden, wo Audio wahrscheinlich mit nativen <audio> Elementen und/oder JavaScript gesteuert werden sollte.

Der Trick

Es gibt ein paar Alternativen, um Sounds mit CSS abzuspielen, aber die grundlegende Idee ist dieselbe: das Audiofile als verstecktes Objekt/Dokument in die Webseite einfügen und es anzeigen, sobald eine Aktion stattfindet. So etwas wie hier

<style>
  embed { display: none; }
  button:active + embed { display: block; }
</style>

<button>Play Sound</button>
<embed src="path-to-audio-file.mp3" />

Demo ansehen

Dieser Code verwendet einen <embed> Tag, aber wir könnten auch <object> mit ähnlichen Ergebnissen verwenden

<object data="path-to-audio-file.mp3"></object>

Eine kurze Anmerkung zur Demo und dieser Technik. Ich habe vor etwa einem Jahr mit dieser Technik ein kleines Klavier nur mit HTML und CSS entwickelt. Es hat super funktioniert, aber seitdem haben sich einige Dinge geändert und die Demo funktioniert auf CodePen nicht mehr.

Die größte Änderung betraf die Sicherheit. Da embed oder object anstelle von audio verwendet werden, unterliegt die importierte Datei strengeren Sicherheitsprüfungen. Cross-Origin-Access-Control-Richtlinien (CORS) zwingen die Audiodatei dazu, auf demselben Protokoll und derselben Domäne wie die Seite, in die sie importiert wird, zu liegen. Selbst die Umwandlung des Sounds in Base64 funktioniert nicht mehr. Außerdem müssen Sie (und die Benutzer) möglicherweise Autoplay in den Browsereinstellungen aktivieren, damit dieser Trick funktioniert. Es ist oft hinter einem Flag aktiviert.

Eine weitere Änderung ist, dass Browser die Sounds jetzt nur noch einmal abspielen. Ich hätte schwören können, dass frühere Browser den Sound jedes Mal abspielten, wenn er angezeigt wurde. Aber das scheint nicht mehr der Fall zu sein, was den Umfang des Tricks erheblich einschränkt (und die Klavierdemo fast nutzlos macht).

Das CORS-Problem kann umgangen werden, wenn Sie die Kontrolle über die Server und Dateien haben, aber das deaktivierte Autoplay ist eine nutzerabhängige Sache, die außerhalb unserer Kontrolle liegt.

Demo ansehen

Warum es funktioniert

Die Theorie hinter diesem Verhalten findet sich vergraben in der Definition des embed-Tags

Immer wenn ein <embed> Element, das nicht potenziell aktiv war, potenziell aktiv wird, und wenn ein potenziell aktives embed Element, das potenziell aktiv bleibt und dessen src Attribut gesetzt, geändert oder entfernt wurde oder dessen type Attribut gesetzt, geändert oder entfernt wurde, muss der Benutzeragent eine Aufgabe in die Warteschlange stellen, um die embed Element Setup-Schritte für dieses Element auszuführen.

Dasselbe gilt für die Definition des object-Tags

Immer wenn eine der folgenden Bedingungen eintritt

[…]

• das Element wechselt von gerendert werden zu nicht gerendert werden, oder umgekehrt,

[…] muss der Benutzeragent eine Aufgabe in die Warteschlange stellen, um die folgenden Schritte auszuführen, um zu (re-)bestimmen, was das object Element darstellt. [und schließlich verarbeiten und ausführen]

Während es für object klarer ist (die Datei wird beim Rendern verarbeitet und ausgeführt), haben wir für embed dieses Konzept des "potenziell aktiven", das etwas komplizierter erscheinen mag. Und obwohl es einige zusätzliche Bedingungen gibt, wird es beim anfänglichen Rendern ähnlich wie bei object ausgeführt.

Wie Sie sehen können, ist dies technisch überhaupt kein Trick, sondern wie alle Browser sich verhalten sollten... obwohl sie es nicht tun.

Browser-Unterstützung

Wie bei vielen dieser Hacks und Tricks ist die Unterstützung dieser Funktion nicht großartig und variiert erheblich von Browser zu Browser.

Es funktioniert wie ein Zauber in Opera und Chrome, was einen großen Teil des Browser-Marktes ausmacht. Die Unterstützung ist jedoch bei anderen Chromium-basierten Browsern lückenhaft. Zum Beispiel spielt Edge auf Mac den Audio korrekt ab, während der Brave-Browser dies nicht tut, es sei denn, Sie haben die neueste Version.

Safari war ein Ausschlusskriterium, und dasselbe gilt für Internet Explorer oder Edge unter Windows. Nichts davon funktionierte in irgendeinem dieser Browser.

Firefox spielt alle Sounds auf einmal beim Laden der Seite ab, spielt sie dann aber nicht mehr ab, nachdem sie versteckt und wieder gezeigt wurden. Es wird eine Sicherheitswarnung in der Konsole ausgelöst, da versucht wird, die Sounds "ohne Benutzerinteraktion" abzuspielen, was sie blockiert, es sei denn, der Benutzer genehmigt die Seite zuerst.

Alles in allem ist dies ein lustiger Trick mit CSS, aber eines dieser "mach das nicht zu Hause"-Dinge... was in der Softwareentwicklung bedeutet, dass es das Perfekte ist, um es zu Hause zu tun. :)