Playing Sounds with CSS

CSS excels at styling, layout, and visual presentation, brimming with colors, sizes, and animations. But did you know it can also subtly control audio playback on a webpage?

This article unveils a clever technique—more a precise application of HTML and CSS than a true hack, though admittedly, it borders on one. For production environments, however, using native audio elements and/or JavaScript for audio control is strongly recommended.

The Technique

Several methods exist for CSS-driven sound playback, but the core principle remains consistent: embedding the audio file as a hidden element within the page and revealing it to trigger playback. Here's an example:

<style>
  embed { display: none; }
  button:active   embed { display: block; }
</style>
<button>Play Sound</button>
<embed src="path-to-audio-file.mp3"></embed>

This utilizes the <embed></embed> tag. The <object></object> tag offers similar functionality:

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

Important Considerations:

A previous CodePen piano project demonstrated this technique's effectiveness. However, recent browser updates have introduced limitations:

• Security Restrictions: Using <embed></embed> or <object></object> subjects the audio file to stricter security checks. CORS policies necessitate that the audio file resides on the same protocol and domain as the webpage. Base64 encoding won't circumvent this. Autoplay may need to be explicitly enabled in browser settings.

• Single Playback: Unlike previous browser behavior, sounds now typically play only once. This significantly restricts the technique's applicability.

While server-side control can mitigate the CORS issue, autoplay limitations remain user-dependent and beyond our control.

Why This Works

The underlying mechanism is detailed within the specifications for the <embed></embed> and <object></object> tags: The browser processes and renders the embedded audio upon the element becoming "potentially active" or changing render state. While technically not a hack, browser inconsistencies exist.

Browser Compatibility

Cross-browser support is inconsistent:

• Opera and Chrome: Excellent compatibility.

• Chromium-based Browsers: Support varies; Edge on macOS works reliably, while Brave may require the latest version.

• Safari, Internet Explorer, Edge (Windows): Generally unsupported.

• Firefox: Plays all sounds at once on page load, then blocks subsequent playback due to security warnings about user interaction.

This CSS trick, while entertaining, is best considered a "don't try this at home" technique—unless, of course, you're a software developer eager to explore its quirks.

The above is the detailed content of Playing Sounds with CSS. For more information, please follow other related articles on the PHP Chinese website!