174

I haven't found any resources on how to do that. Something as simple as changing the color of the player would be nice to have :)

4
  • 1
    Different browsers react differently to styling of the audio element - stackoverflow.com/a/27765938/325251
    – mvark
    Jan 4, 2015 at 13:26
  • 1
    yes, and on ie it looks the worst. how can they make it look so bad?
    – live-love
    Mar 27, 2015 at 18:14
  • 1
    video styling cross browser answer advprog.blogspot.co.uk/2013/07/…
    – Mousey
    Aug 27, 2015 at 17:45
  • @Mousey Unfortunately that's not cross-browser at all. It's only Webkit and maybe Opera.
    – Ringo
    Dec 8, 2016 at 21:46

13 Answers 13

129

Yes: you can hide the built-in browser UI (by removing the controls attribute from audio) and instead build your own interface and control the playback using Javascript (source):

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

You can then style the elements however you wish using CSS.

MDN HTMLAudioElement API reference

3
  • surely this (the .play) wouldn't work on IOS as it is blocked (see stackoverflow.com/questions/31776548/…) Jun 13, 2020 at 16:33
  • 5
    @user1432181 your response seems incorrect. The question you linked to says that iOS blocks autoplay and requires the playing to be initiated by a user interaction. The code provided in this answer runs after a click event. Oct 14, 2020 at 17:18
  • Complete but simple answer that actually answers the question and doesn't refer to 3rd party bs (goes to dependancy & responsibility), that also happens to make me hit my head for not seeing this in the first place 🤣 Me like.
    – user236800
    Dec 30, 2020 at 16:52
124
<audio>

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

REFERENCE: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

8
  • 27
    Poor presentation but usefull CSS selector !
    – benoît
    Mar 15, 2016 at 16:14
  • 8
    can you please show an exemple how to use these ? just sample code ?
    – Xsmael
    Jul 23, 2016 at 8:53
  • 11
    This is only supported by webkit-based browsers (e.g not Firefox, IE, etc.)
    – gilad905
    Oct 6, 2016 at 12:35
  • 2
    Very nice hacking , it's correct answer and many thanks ! i change style of audio tag without pain and additional JS code , ViVa Fabio
    – java acm
    Sep 23, 2017 at 17:01
  • 3
    Appears to be copy/pasted from gist.github.com/afabbro/3759334 Mar 10, 2020 at 0:28
48

Yes! The HTML5 audio tag with the "controls" attribute uses the browser's default player. You can customize it to your liking by not using the browser controls, but rolling your own controls and talking to the audio API via javascript.

Luckily, other people have already done this. My favorite player right now is jPlayer, it is very stylable and works great. Check it out.

8
  • 88
    So the answer is "no, it is not possible, you must use an external player"?
    – Fernando
    May 19, 2014 at 15:56
  • 2
    @Fernando: it is indeed possible. This answers the question "is it possible?"
    – Dan Schnau
    May 26, 2014 at 0:57
  • 5
    Thank you @dsschnau. I posted my comment because the question is about styling html5 video tag, and all the answers are more or less like yes, it is possible, using other tags.
    – Fernando
    May 26, 2014 at 14:34
  • 2
    jplayer is not easily customizable if you don't want to use one of its skins out of the box. I'd like a player that is bare bones -- tiny and easily skinnable.
    – Kirk Ross
    Nov 8, 2015 at 3:24
  • 15
    So, is that really a "no"? Rolling your own UI is not the same thing a stying existing markup.
    – bob
    Feb 29, 2016 at 1:23
45

some color tunings

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}
2
  • 4
    this is a quick and dirty way to change the basic colors of the player, very handy
    – wakandan
    Mar 7, 2019 at 4:27
  • 1
    I dusted off my login credentials to sign in, upvote this, and say "THANK YOU".
    – Marc Amos
    Mar 2, 2020 at 16:33
31

The appearance of the tag is browser-dependent, but you can hide it, build your own interface and control the playback using Javascript.

9

Ken had it right as well.

a css tag:

audio {

}

will get you some results. seems it doesnt want the player any height above or below 25px but the width can be shortened or lengthened to an extent.

this was good enough for me; see this example (warning, audio plays automatically): www.thenewyorkerdeliinc.com

3
  • For me, a big issue is Internet Explorer. It looks terrible and different color and much bigger size than the other browser players, even though the width is set to 150px
    – Ringo
    Dec 8, 2016 at 21:50
  • If you need to get IE9+ player into a small space, a height of 25px and width of 100px worked for me. I think the height of 25px was key, but larger numbers didn't work for whatever reason.
    – Ringo
    Dec 8, 2016 at 21:57
  • The link is down unfortunately Dec 12, 2019 at 3:48
8

Missing the most important one IMO the container for the controls ::-webkit-media-controls-enclosure:

&::-webkit-media-controls-enclosure {
    border-radius: 5px;
    background-color: green;
}
6

To change just the colour of the player, simply address the audio tag in your css file, for instance on one of my sites the player became invisible (white on white) so I added:

audio {
    background-color: #95B9C7;
}

This changed the player to light blue.

3
  • 14
    This does not change the color of my player, it only puts a background color behind it. Any idea why?
    – Tom
    Aug 28, 2013 at 8:06
  • 1
    @Tom because this solution is not for changing the default gray background of the player :-) Same result as you for me. Jun 7, 2020 at 15:04
  • This doesn't work on Chrome and on Firefox it seems to put the color over the original color, so you get a mixed color and if you try to use a light color you won't see any change.
    – Gary
    Jul 23, 2021 at 13:31
6

Yes, it's possible, from @Fábio Zangirolami answer

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}
0
6

If you are using Chrome, turned on "Show user agent shadow DOM" in Chrome Dev Tool settings

Show user agent shadow DOM

Now you'll able to see all the pseudos

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

...

enter image description here

and now you can style them

audio::-webkit-media-controls-mute-button {
  display: none;
}
1

I did some customizations on the Audio component. Here is what i did.

audio {
/*border-radius: 90px;*/
width: 250px;
height: 45px;
margin-top: 5px;
margin-bottom: 5px;
}

audio::-webkit-media-controls-mute-button {
display: none !important;
}

audio::-webkit-media-controls-volume-slider {
display: none !important;
}

audio::-webkit-media-controls-volume-control-container.closed {
display: none !important;
}
audio::-webkit-media-controls-volume-control-container{
display: none !important;
}

I found that these customizations only works for Edge and Chrome. Not Firefox..

-1

You can use HTMLMediaElement Api to create your own audioplayer with html/css. It is likely the only option. Because the default player can't be styled.

-7

If you want to style the browsers standard music player in the CSS:

audio {
    enter code here;
}
2
  • 1
    not complete description is very simple and i can use this way for styling all element audio Nov 6, 2018 at 10:10
  • 1
    Even a cursory check of this answer would have revealed that it's wrong. May 10, 2019 at 23:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.