CSS Styling the Audio Element

In our previous post, where we discuss the basics of the HTML audio element, we mentioned that each individual web browser presents its own version of an audio player and that it will look different in every browser. 

There is not much you can do with CSS directly (without JavaScript) on the audio element, and since the default player is rendered by the browser itself, it doesn’t make a lot of sense to spend the time accounting for all browsers — it will be a moving target that will continuously change.

However, there are a few things you can do, and you might just want to know what they are and how this all works. Hopefully this will help.

The Audio Tag

When you create an audio player with:

<audio src="Bell.mp3" type="audio/mpeg" controls></audio>

You get something like this.

Open this page’s URL on another browser (Chrome, Firefox, Edge, Safari, etc.), and see that it is rendered slightly differently by each browser.

Each browser creates a block element for the audio tag (i.e. display:block), and then that parent block element container holds a custom component that exists in the “shadow DOM” of the browser window. We’ll get into that later.

You can treat the parent container much like any block element in your CSS, adjusting height and width and colors. So with:

audio {height:200px; width:300px; background:yellow;}

You will end up with this

You can try it out in different browsers and still see the 300×200 yellow rectangle that contains the audio player.

You can even do some fancy animation and transitions. For example, hover over the player below:

This is done with:

audio:hover {transform: scale(1.1);filter: drop-shadow(2px 3px 3px #333);}

Too much of this sort of thing can lead to a bad user experience, so don’t over-do it. I just wanted you to know that it is possible.

Audio Tag Pseudo-Elements

Although you cannot style the child elements of the audio tag very easily in any sort of uniform, ubiquitous way, there are some pseudo-elements that your CSS can hook into for specific browsers.

You can see how the pseudo-class :hover is used above. Pseudo-elements are similar. You will find in your journey of web development that some pseudo-elements use a single colon and others use a double colon. The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements. Here we will use the double colon.

The most common pseudo-elements you find related to the audio tag are prepended by ::-webkit-media-. These WebKit-only extensions work in some browsers like Chrome and iOS, but the browser developers often change the way this functions, and it is not completely reliable.

The list of these audio element pseudo-elements is as follows:

audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button

For example, if you were to use:

audio::-webkit-media-controls-play-button{
background-color:green;}

It might look like this:

html audio player with pseudo-element styling

But it’s hard to say which browsers will consistently, now and in the future, appear this way.

The Shadow DOM

If you use your browser’s dev tools to inspect your audio tag in the DOM, you will see something like this:

inspection of audio element in DOM

Notice that it is simply the single audio container element, with no way to inspect the inner parts of the player, such as the play button, the scrubber, and the volume control.

This is because the default HTML audio player is located in what is know as “the shadow DOM.” It sounds scary and mysterious, doesn’t it? The shadow DOM is a scoped subtree inside of a DOM element. What this simply means is that something in the shadow DOM is separate (has it’s own scope) and it is the same sort of tree-like structure that you are used to with parent, child, and sibling elements that are unrelated to the rest of the document object model.

Inspecting the Shadow DOM

This information changes from year to year, but currently there are ways of seeing the shadow DOM in both Google and Firefox browser dev tools.

To Inspect the Shadow DOM in Google Chrome:

  1. Open up Google Developer Tools (Mac: Command+Option+I or Windows: F12 or Control + Shift + I)
  2. At the top right you’ll see a three-dot ellipsis. Click on this and go to More Tools >> Settings.

    Chrome dev tools more settings
  3. Next, check the setting Show user agent shadow DOM.
  4. Restart Chrome.

Now when you inspect your audio tag you should see something like:

chrome shadow DOM with audio element

To Inspect the Shadow DOM in Mozilla Firefox:

  1. In the Firefox address bar type in about:config.
  2. You might get to a scary warning screen. Don’t be too afraid and continue on.
  3. Find the two settings
    • devtools.inspector.showUserAgentShadowRoots
    • devtools.inspector.showAllAnonymousContent
    and set them both to True.
  4. Restart Firefox.

It will look roughly the same as it does in Chrome, both sharing a newly discovered #shadow-root section, but notice how the element names are not the same:

Firefox shadow dome with audio element

Because these shadow DOM elements are scoped, there is not much you can do to alter them with simple CSS. But it is good to know how these elements are constructed, especially if you plan to continue learning how to build your own audio player with JavaScript and HTML.

In the next lesson we will learn how to remove the controls attribute and to make your own html audio player with custom buttons and styles using JavaScript.

7 thoughts on “CSS Styling the Audio Element”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • CSS Styling the Audio Element

    There are a few things you can do with CSS to style the HTML audio element in various browsers.

  • How to Get WP RSS Aggregator Feed to Validate

    I’m using the plugin WP RSS Aggregator, and I couldn’t get the custom feed to validate in other places. The validator said that it was missing an <author> field. If an item doesn’t have an author, then the feed doesn’t even supply an empty one. The way to fix it is to go to wp-content/plugins/wp-rss-aggregator/templates/custom-feed/entry.twig ... Read more

  • How to Remove Rank Math Top Banner

    Rank Math has added an ugly top banner to the sites using its plugin. Here's how to hide it.

  • Fix for High CPU Usage on Siteground

    The MailPoet cron job on my website was triggered by Google Bot and caused my CPU seconds on Siteground to go over the quota. Here's how I fixed it.

  • Fast MIDI Song Starter

    Here is a really easy way to build MIDI chord progressions using iRealPro.

  • What is Full Kontakt Required?

    Perhaps you don't know what Kontakt is or how it works. Hopefully we can sort these things out and get you on your way to making some music.

  • How To Style a Range Input Slider

    If you are going to build a custom html audio player, you will need to know how to style a range input slider.

  • How to Build a HTML Audio Player with Vanilla JS (Part 2)

    Here is another tutorial on how to build a custom html audio player with vanilla js.

  • Coding a Custom HTML Audio Player (Part 1)

    Here is a starter tutorial on how to create a custom HTML audio player with HTML and JavaScript.