Is it possible to style html5 audio tag

Question

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

User · Answer

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

User · Answer

Yes  it s possible  from  F  bio Zangirolami answer  audio  -webkit-media-controls-panel  video  -webkit-media-controls-panel                   background-color  red

User · Answer

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     lt audio id  player  src  vincent mp3  gt  lt  audio gt   lt div gt      lt button onclick  document getElementById  player   play    gt Play lt  button gt      lt button onclick  document getElementById  player   pause    gt Pause lt  button gt      lt button onclick  document getElementById  player   volume    0 1  gt Vol   lt  button gt      lt button onclick  document getElementById  player   volume -  0 1  gt Vol - lt  button gt    lt  div gt    You can then style the elements however you wish using CSS   MDN HTMLAudioElement API reference

User · Answer

some color tunings  audio       filter  sepia 20   saturate 70   grayscale 1  contrast 99   invert 12        width  200px      height  25px

User · Answer

Missing the most important one IMO the container for the controls   -webkit-media-controls-enclosure   amp   -webkit-media-controls-enclosure       border-radius  5px      background-color  green

User · Answer

lt audio gt   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

User · Answer

You have to create your own player that interfaces with the HTML5 audio element  This tutorial will help http   alexkatz me html5-audio building-a-custom-html5-audio-player-with-javascript

User · Answer

If you want to style the browsers standard music player in the CSS    audio       enter code here

User · Answer

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

User · Answer

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

User · Answer

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

[html] Is it possible to style html5 audio tag?

Examples related to html

Examples related to audio