Mehrere Techniken zum Abspielen von Sounds mit CSS

CSS ist der Bereich von Stil, Layout und Präsentation. Es strotzt vor Farbe, Größe und Animation. Aber wussten Sie, dass Sie damit auch die Tonwiedergabe auf einer Webseite steuern können?

Dieser Artikel stellt einige Techniken vor. Es handelt sich nicht wirklich um einen Hack, sondern um eine strikte Implementierung von HTML und CSS. Aber um ehrlich zu sein, ist das immer noch ein Hack. Ich empfehle nicht, dies in der Produktion zu verwenden, da der Ton möglicherweise immer noch durch das <audio>-Element oder JavaScript gesteuert wird.

Tipps

Es gibt mehrere Möglichkeiten, mit CSS Ton abzuspielen, aber die Grundidee ist dieselbe: Fügen Sie die Audiodatei als verstecktes Objekt oder Dokument in die Webseite ein und zeigen Sie sie an, wenn eine Aktion stattfindet. So was:

<Stil>
  einbetten { Anzeige: keine; }
  button:aktiv + einbetten { Anzeige: Block; }
</Stil>

<button>Ton abspielen</button>
<embed src="Pfad zur Audiodatei.mp3" />

Dieser Code verwendet das Tag <embed>, Sie können aber auch <object> verwenden, um ähnliche Ergebnisse zu erzielen:

<object data="Pfad zur Audiodatei.mp3"></object>

Eine kurze Anmerkung zu dieser Demo und der zugehörigen Technologie. Vor etwa einem Jahr habe ich diese Technik verwendet, um ein CodePen-Minipiano nur mit HTML und CSS zu entwickeln. Dies hat gut funktioniert, aber seitdem haben sich die Dinge geändert und die Demo funktioniert auf CodePen nicht mehr.

Die größten Änderungen betreffen die Sicherheit. Da Embed oder Object anstelle von Audio verwendet wird, unterliegen die importierten Dateien strengeren Sicherheitsprüfungen. Die Cross-Origin Access Control Policy (CORS) erzwingt, dass die Audiodatei dasselbe Protokoll und dieselbe Domäne verwendet wie die Seite, die die Datei importiert. Auch das Einfügen des Tons in Base64 funktioniert nicht mehr. Außerdem müssen Sie (und der Benutzer) möglicherweise die automatische Wiedergabe in den Browsereinstellungen aktiviert haben, damit dieser Trick funktioniert.

Eine weitere Änderung besteht darin, dass der Browser den Ton jetzt nur noch einmal abspielt. Ich könnte schwören, dass frühere Browser den Ton jedes Mal abgespielt hätten. Aber das scheint nicht mehr zu funktionieren, was den Umfang der Technik erheblich einschränkt (und diese Klavierdemonstration nahezu nutzlos macht).

Wenn Sie Kontrolle über den Server und die Dateien haben, können Sie das CORS-Problem umgehen, aber die Deaktivierung der automatischen Wiedergabe liegt außerhalb der Kontrolle jedes Benutzers.

Warum das funktioniert

Die Theorie hinter diesem Verhalten finden Sie in der Definition des Embed-Tags:

Immer wenn ein nicht latent aktives Embed-Element potentiell aktiv wird und jedes Mal, wenn sein src-Attribut oder type-Attribut gesetzt, geändert oder gelöscht wird, muss der Benutzeragent eine Aufgabe unter Verwendung der Embed-Aufgabenquelle in die Warteschlange stellen, um die Einrichtungsschritte des Embed-Elements auszuführen.

Gleiches gilt für die Definition des Objekt-Tags:

Wenn eines der folgenden Ereignisse eintritt:

[...]

Der Zustand des Elements ändert sich von „gerendert“ zu „nicht gerendert“ und umgekehrt.

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

Während wir die Mechanismen der Objektverarbeitung besser verstehen (die Datei wird verarbeitet und beim Rendern ausgeführt), gibt es für Einbettungen das Konzept einer „latenten Aktivität“, das etwas komplizierter zu sein scheint. Dies wird beim ersten Rendern ähnlich ausgeführt wie bei Objekten, es gibt jedoch einige zusätzliche Bedingungen.

Wie Sie sehen, handelt es sich hierbei technisch gesehen überhaupt nicht um einen Trick, aber nicht alle Browser verhalten sich gleich.

Browserunterstützung

Wie bei vielen ähnlichen Hacks ist die Unterstützung für diese Funktion lückenhaft und variiert stark von Browser zu Browser.

In den Browsern Opera und Chrome funktioniert es. Für andere Chromium-basierte Browser ist die Unterstützung jedoch minimal. Beispielsweise gibt Edge auf dem Mac Audio korrekt wieder, während der Brave-Browser Audio nicht korrekt wiedergibt, wenn Sie nicht über die neueste Version verfügen.

Es funktioniert weder in Safari noch in Internet Explorer oder Edge unter Windows. Es funktioniert in keinem dieser Browser.

Firefox gibt alle Sounds sofort nach dem Laden der Seite wieder, nach dem Ausblenden und erneuten Anzeigen der Seite erfolgt jedoch keine Wiedergabe mehr. Wenn versucht wird, Sounds „ohne Benutzerinteraktion“ abzuspielen, löst dies eine Sicherheitswarnung in der Konsole aus und die Sounds werden blockiert, sofern der Benutzer die Site nicht zuerst genehmigt.

Insgesamt handelt es sich hierbei um einen interessanten CSS-Trick, aber es handelt sich eher um eine „Verwenden Sie dies nicht in der Produktion“-Sache …

Damit ist dieser Artikel über verschiedene Techniken zum Abspielen von Sounds mit CSS abgeschlossen. Weitere relevante Inhalte zum Abspielen von Sounds mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!