Several techniques for playing sounds with CSS

CSS is the realm of style, layout, and presentation. It’s awash with color, size, and animation. But did you know that it can also control the playback sound on a web page?

This article introduces some techniques. It's not really a hack, but a strict implementation of HTML and CSS. But to be honest, this is still a hack. I don't recommend using this in production, as the audio may still be controlled by the <audio> element or JavaScript.

Tips

There are several ways to play sound with CSS, but the basic idea is the same: insert the audio file as a hidden object or document in the web page and display it when an action occurs. Like this:

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

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

This code uses the <embed> tag, but you can also use <object> to achieve similar results:

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

A quick note about this demo and related technology. About a year ago, I used this technique to develop a CodePen mini-piano using only HTML and CSS. This worked fine, but things have changed since then and the demo no longer works on CodePen.

The biggest changes are related to safety. Since it uses embed or object instead of audio, the imported files will be subject to stricter security checks. The Cross-Origin Access Control Policy (CORS) enforces that the audio file is on the same protocol and domain as the page that imports the file. Even putting the sound into base64 will no longer work. Additionally, you (and the user) may need to have autoplay activated on their browser settings for this trick to work.

Another change is that the browser now plays the sound only once. I would have sworn browsers in the past would have played the sound every time. But that no longer seems to work, which greatly limits the scope of the technique (and makes this piano demonstration almost useless).

If you have control over the server and the files, you can work around the CORS issue, but disabling autoplay is something that is out of every user's control.

Why this works

The theory behind this behavior can be found in the definition of the embed tag:

Whenever a non-latently active embed element becomes potentially active, and each time its src attribute or type attribute is set, changed, or deleted, the user agent must queue a task using the embed task source to run the embed element setup steps.

The same is true for the definition of the object tag:

Whenever any of the following occurs:

[...]

The element changes from being rendered to not rendered, or vice versa.

[...] The user agent must queue a task to run the following steps to (re)determine what the object t element represents. [and finally process and run it]

While we have a clearer understanding of the mechanics of object processing (the file is processed and runs on render), for embeds, there is the concept of a "latent activity" which seems a bit more complicated. This is run on the initial render similar to how it works with objects, although there are some additional conditionals.

As you can see, technically this isn't a trick at all, but not all browsers behave the same way.

Browser support

Like many similar hacks, support for this feature is patchy and varies widely from browser to browser.

On Opera and Chrome browsers, it works. However, for other Chromium-based browsers, the support is minimal. For example, Edge on Mac plays audio correctly, while the Brave browser won’t play audio correctly unless you have the latest version.

It doesn't work in Safari, nor does it work for Internet Explorer or Edge on Windows. It doesn't work in any of these browsers.

Firefox will play all sounds immediately when the page loads, but will no longer play after it is hidden and shown again. When sounds try to play "without user interaction" it triggers a security warning in the console and they will be blocked unless the user approves the site first.

Overall, this is interesting CSS trickery, but it’s kind of a “don’t use this in production” thing…

This concludes this article on several techniques for playing sounds with CSS. For more relevant content on playing sounds with CSS, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!