29

I'm building a music player web application which implements the HTML5 audio tag, however would like it to look consistent across browsers - is it possible to define my own custom CSS? And how?

user202729
  • 3,358
  • 3
  • 25
  • 36
Fela Maslen
  • 2,022
  • 3
  • 25
  • 46
  • The options are currently very limited, but you can use `outline` to help it stand out a bit. – Pikamander2 Sep 07 '17 at 06:21
  • 2
    Does this answer your question? [Is it possible to style html5 audio tag?](https://stackoverflow.com/questions/4126708/is-it-possible-to-style-html5-audio-tag) – user202729 Sep 02 '21 at 14:29

5 Answers5

33

There is not currently any way to style HTML5 <audio> players using CSS. Instead, you can leave off the control attribute, and implement your own controls using Javascript. If you don't want to implement them all on your own, I'd recommend using an existing themeable HTML5 audio player, such as jPlayer.

Ruslanas Balčiūnas
  • 7,310
  • 3
  • 24
  • 41
Brian Campbell
  • 322,767
  • 57
  • 360
  • 340
21

I discovered quite by accident (I was working with images at the time) that the box-shadow, border-radius and transitions work quite well with the bog-standard audio tag player. I have this working in Chrome, FF and Opera.

audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

with:-

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow:  2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}

I grant you it only "tarts it up a bit", but it makes them a sight more exciting than what's already there, and without doing MAJOR fannying about in JS.

NOT available in IE, unfortunately (not yet supporting the transition bit), but it seems to degrade nicely.

Spike
  • 221
  • 2
  • 3
3

You can style audio element using some obscure css selectors. Here's a few of them.

audio::-webkit-media-controls-enclosure {
    background-color: #c6c6ec;
}
audio::-webkit-media-controls-timeline {}
audio::-webkit-media-controls-volume-control-container {}
audio::-webkit-media-controls-volume-control-container.closed {}
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 {}

Haven't found an exhaustive list of these, but here's the closest thing.

Spankied
  • 1,626
  • 13
  • 21
1

Besides the box-shadow, transform and border options mentioned in other answers, WebKit browsers currently also obey -webkit-text-fill-color to set the colour of the "time elapsed" numbers, but since there is no way to set their background (which might vary with platform, e.g. inverted high-contrast modes on some operating systems), you would be advised to set -webkit-text-fill-color to the value "initial" if you've used it elsewhere and the audio element is inheriting this, otherwise some users might find those numbers unreadable.

Silas S. Brown
  • 1,469
  • 1
  • 17
  • 18
0

There are CSS options for the audio tag.

Like: html 5 audio tag width

But if you play around with it you'll see results can be unexpected - as of August 2012.

Community
  • 1
  • 1
geektard
  • 1
  • 1
    I think the OP was looking for CSS rules that are unique to Audio such that he can give it a customizable look. Generic rules like width, though applicable, are not sufficient. – james.garriss Oct 04 '12 at 16:39