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 :)
-
1Different browsers react differently to styling of the audio element - stackoverflow.com/a/27765938/325251– mvarkJan 4, 2015 at 13:26
-
1yes, and on ie it looks the worst. how can they make it look so bad?– live-loveMar 27, 2015 at 18:14
-
1video styling cross browser answer advprog.blogspot.co.uk/2013/07/…– MouseyAug 27, 2015 at 17:45
-
@Mousey Unfortunately that's not cross-browser at all. It's only Webkit and maybe Opera.– RingoDec 8, 2016 at 21:46
13 Answers
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.
-
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. Dec 30, 2020 at 16:52
<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
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.
-
88So the answer is "no, it is not possible, you must use an external player"?– FernandoMay 19, 2014 at 15:56
-
2@Fernando: it is indeed possible. This answers the question "is it possible?" May 26, 2014 at 0:57
-
5Thank 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.– FernandoMay 26, 2014 at 14:34
-
2jplayer 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. Nov 8, 2015 at 3:24
-
15So, is that really a "no"? Rolling your own UI is not the same thing a stying existing markup.– bobFeb 29, 2016 at 1:23
some color tunings
audio {
filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
width: 200px;
height: 25px;
}
-
4this is a quick and dirty way to change the basic colors of the player, very handy– wakandanMar 7, 2019 at 4:27
-
1I dusted off my login credentials to sign in, upvote this, and say "THANK YOU". Mar 2, 2020 at 16:33
The appearance of the tag is browser-dependent, but you can hide it, build your own interface and control the playback using Javascript.
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
-
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– RingoDec 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.– RingoDec 8, 2016 at 21:57
-
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;
}
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.
-
14This does not change the color of my player, it only puts a background color behind it. Any idea why?– TomAug 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.– GaryJul 23, 2021 at 13:31
Yes, it's possible, from @Fábio Zangirolami answer
audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
background-color: red;
}
If you are using Chrome, turned on "Show user agent shadow DOM" in Chrome Dev Tool settings
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
...
and now you can style them
audio::-webkit-media-controls-mute-button {
display: none;
}
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..
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.
If you want to style the browsers standard music player in the CSS:
audio {
enter code here;
}
-
1not complete description is very simple and i can use this way for styling all element audio Nov 6, 2018 at 10:10
-
1Even a cursory check of this answer would have revealed that it's wrong. May 10, 2019 at 23:34