CSS style <audio>

Question

is there a way how to style timeline thumb (seeker) of an <audio> tag? I'm able to target and style most of the element using audio::-webkit- shadow DOM pseudo selectors.

However, I was unlucky finding a selector to match the playback timeline thumb. It's done by <input type="range">, another shadow DOM element. So basically I'm trying to target shadow DOM pseudo element inside another shadow DOM pseudo element.

My playground is on https://jsfiddle.net/cLwwwyh5/.

I just need this to work in Chrome (Chrome App)

Solution 1

Going through the list of available modifiers:

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

Unless I'm missing it, styling the timeline thumb through CSS doesn't seem possible at the moment.

But you're so close to getting it all to look right, argg! It therefore pains me to advise using something like MediaElement.js, or creating your own custom player like in this jsFiddle. It does, however, come with the added bonus of working cross-browser, so that's something.

Solution 2

Here's how I do it. jsfiddle

You can use CSS Filter it's a little bit hacky and limited but it's the best we can do right now.

the following CSS changes the default color to red but it'll affect the whole player even the background if it have saturation (not black, white or a shade of grey)

audio::-webkit-media-controls-panel {
    background: transparent;
    -webkit-filter: hue-rotate(143deg) saturate(10);
}

so it's better to apply changes separately

audio::-webkit-media-controls-volume-slider {
    -webkit-filter: hue-rotate(143deg) saturate(10);    
}
audio::-webkit-media-controls-timeline {
    -webkit-filter: hue-rotate(143deg) saturate(10);    
}

How to calculate the needed hue-rotate() and saturate()

I took the default color #4285f4 and used Photoshop's Hue/Saturation to get the wanter hue degrees and saturation value. but you can use whatever tool you have or calculate it your self

for example using tools like this or this that converts to HSL (Hue, Saturation, Lightness)

I can see that the color #4285f4 have an HSL value of (217, 89%, 61%)

the color red aka #FF0000 have an HSL value of (0, 100%, 20%)

Hue Value ranges from 0 to 360° so to get to red I need to hue-rotate(143deg) (360 - 217) and saturate(10) is the 100% Saturation of wanted color red. read more about saturate()

---

for the rest of elements, here's a list of known sneaky selectors.

Webkit Pseudo-Element Selectors (Shadow DOM Elements)

Comments

[Greegus]

I'm afraid that in the end I will stick with using 3rd part player or making my own, as you suggested. Eventually I could possibly use <input type="range"> for making my own player to make things a little bit easier, since it won't be nested inside <audio> shadow DOM and I could style it with shadow DOM pseudo selectors directly.

[AllInOne]

Very helpful, especially as Chrome has just pushed Material Design on to the Mac. How did you identify the available modifiers?