Die Wiedergabe von Sounds mit CSS

0
273

CSS ist die Domäne von styling, layout und Präsentation. Es ist voll von Farben, Größen und Animationen. Aber wussten Sie, dass es könnte auch die Steuerung, wenn ein Ton abgespielt werden soll, auf eine web-Seite?

Dieser Artikel ist über einen kleinen trick, dass Sie ziehen. Es ist eigentlich eine strikte Umsetzung von HTML und CSS, so dass es nicht wirklich ein hack. Aber… seien wir ehrlich, es ist immer noch eine Art hack. Ich würde nicht empfehlen unbedingt die Verwendung es in der Produktion, wo die audio-sollte wahrscheinlich sein kontrollierte mit native <audio> – Elemente, und/oder JavaScript.

Der trick

Es gibt ein paar alternativen zum wiedergeben von sounds mit CSS, aber die zugrunde liegende Idee ist die gleiche: einfügen der audio-Datei als eine versteckte Objekt/Dokument innerhalb der web-Seite, und die Anzeige, wenn eine Aktion passiert. So etwas wie dieses:

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

<button>Sound Abspielen</button>
<embed src=”Pfad-zur-audio-Datei.mp3″ />

Demo Ansehen

Dieser code wird mit einem <embed> – tag, aber wir können auch die <object> – mit ähnlichen Ergebnissen:

<object data=”Pfad-zur-audio-Datei.mp3″></object>

Ein kurzer Hinweis auf die demo und diese Technik. Ich entwickelte ein kleines Klavier auf CodePen nur mit HTML und CSS, mit dieser Technik vor etwa einem Jahr. Es hat Super geklappt, aber seitdem hat sich einiges geändert und die demo funktioniert nicht auf CodePen mehr.

Die größte Veränderung war in Bezug auf die Sicherheit. Als es nutzt embed oder object anstelle von audio, die importierten Datei strengeren Sicherheitskontrollen. Cross-origin access control policies (CORS) Kraft, die audio-Datei, die auf dem gleichen Protokoll und domain, da die Seite es wird importiert. Auch setzen die Ton-in base64 wird nicht mehr funktionieren. Auch, Sie (und die Benutzer), müssen möglicherweise aktivieren autoplay in Ihrem browser die Einstellungen für diesen trick zu arbeiten. Oft ist es aktiviert, die hinter einer fahne.

Eine weitere änderung ist, dass der Browser jetzt nur die Wiedergabe einmal. Ich hätte schwören können, dass die vergangene Browser gespielt, der sound jedes mal, dass es gezeigt wurde. Aber das scheint nicht mehr der Fall, die deutlich die Grenzen der Umfang der trick (und trägt die piano-demo fast nutzlos).

Die CORS-Problem kann umgangen werden, wenn man die Kontrolle über die Server und Dateien, aber das deaktiviert autoplay ist eine pro-Benutzer-Ding, das ist außerhalb unserer Kontrolle.

Demo Ansehen

Warum es funktioniert

Die Theorie, die hinter diesem Verhalten gefunden werden kann, begraben in der definition des embed-Tags:

Wenn ein embed-element, das war nicht potenziell aktiv wird potentiell aktiv, und wenn eine potentiell aktiv embed-element, das noch potentiell aktiv und hat das src-Attribut festgelegt, geändert oder entfernt werden oder dessen type-Attribut festgelegt, geändert oder entfernt wird, wird der user-agent muss man eine Aufgabe mit Hilfe des embed-task-Quelle zu laufen, das embed-element setup-Schritte für das element aus.

Das gleiche gilt für die definition des object-Tags:

Immer, wenn eine der folgenden Bedingungen auftreten:

[…]

  • der element verändert wird gerendert und nicht gerendert wird, oder Umgekehrt,

[…] der user-agent muss man eine Aufgabe zum ausführen der folgenden Schritte, um (re)bestimmen, was das object-element repräsentiert. [und schließlich verarbeiten und ausführen]

Zwar ist es klarer für das Objekt (die Datei verarbeitet wird, und führen Sie auf render), haben wir dieses Konzept der “potentiell aktiv” einbetten, das scheint ein bisschen komplizierter. Und zwar gibt es einige zusätzliche Bedingungen, es läuft auf den ersten render-ähnlich wie es beim Objekt.

Wie Sie sehen können, technisch ist das kein trick überhaupt, aber wie alle Browser Verhalten soll… obwohl Sie das gar nicht.

Browser-Unterstützung

Wie viele von diesen hacks und tricks, die Unterstützung dieser Funktion ist nicht groß und variiert von browser zu browser.

Es funktioniert wie ein Charme auf Opera und Chrome, was bedeutet, dass ein großer Prozentsatz der browser-Markt. Allerdings ist die Unterstützung fleckige, für andere Chromium-basierte Browser. Zum Beispiel, Kante auf Mac spielen Sie die audio-korrekt, während die Mutigen browser nicht, es sei denn, Sie haben die neueste version.

Safari war ein non-starter, und das gleiche kann gesagt werden für den Internet-Explorer oder Edge auf Windows. Nichts in der Nähe arbeiten, auf diesen Browsern.

Firefox Abspielen alle Töne auf einmal auf die Seite laden, aber dann nicht spielen, nachdem Sie ausgeblendet und wieder eingeblendet. Es löst eine Sicherheits-Warnung in der Konsole die sounds versuchen zu spielen, “ohne Interaktion des Benutzers,” Sie blockiert werden, es sei denn, der Benutzer genehmigt die site zuerst.

Insgesamt ist dies ein Spaß trick mit CSS, aber eine von diesen “nicht zu Hause” Art von Sachen…, die in der software-Entwicklung bedeutet dies ist die perfekte Sache zu tun, zu Hause. 🙂