CODEWITHSUNDEEP
csshtml5-audio
Greegus
Greegus

Reputation: 586

CSS style <audio>

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.

enter image description here

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

audio player shadow DOM structure

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

Upvotes: 8

Views: 15840

Answers (2)

Maher Fattouh
Maher Fattouh

Reputation: 1860

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)

Upvotes: 2

Herman Schaaf
Herman Schaaf

Reputation: 48435

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.

Upvotes: 11

Related Questions