Change audio background color in HTML5 using css

Question

I searched so many thing but didnot find any useful document..I want to change background-color of audio tag as I know background-color is enough but its not working..Is there any solution to change it or is it possible to change?I do not want to use any plugin..just using by CSS I want to change..

Code:

<audio controls="">
  <source src="http://www.sousound.com/music/healing/healing_01.mp3" type="audio/mpeg">
</audio>

@andrescpacheco please read my question first before down vote..I do not need any plugin only css..I also saw that link..If I used that then audio will be like https://jsfiddle.net/BDhara/pzdg2pjp/1/ ...I want to change background color only — Dhara, May 20 '16 at 06:40
first line of the accepted answer: "There is not currently any way to style HTML5 — andrescpacheco, May 20 '16 at 06:42
Yeah that was written before six years ago that's why my question's last line is `is it possible?` — Dhara, May 20 '16 at 06:43
Unfortunately it isn't possible. Why not develop a custom audio player? — andrescpacheco, May 20 '16 at 06:50
I was giving a try if it's possible now..Thanks for your time :) — Dhara, May 20 '16 at 06:51
you you notice it is working... https://jsfiddle.net/rajsharma1612/eg6ghhge/ — RajSharma, May 20 '16 at 06:58
The problem is that each browser has a different way to deal with — andrescpacheco, May 20 '16 at 07:06
if you doesn't have a problem with supporting only webkit browsers then you can use this http://stackoverflow.com/a/35262548/6213434 example: https://jsfiddle.net/eg6ghhge/1/ — , May 20 '16 at 07:11
I tried that...It will work only in chrome..what about other browsers? — Dhara, May 20 '16 at 07:49
@El.oz Thankyou for link but Its must support by all broswers.. — Dhara, May 20 '16 at 07:55
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

score 14 · Answer 1 · edited Sep 02 '21 at 14:28

14

audio::-webkit-media-controls-play-button,
     audio::-webkit-media-controls-panel {
     background-color: #000;
     color: #000;
     }

edited Sep 02 '21 at 14:28

user202729

3,358
3
25
36

answered Aug 27 '20 at 10:05

Lekhraj

455
4
9

5

Please add some explanation to your answer such that others can learn from it – Nico Haase Aug 27 '20 at 12:30
Would this work in non-webkit browsers like Firefox ? The webkit tags don't seem very reliable without some added polyfills or equivalents for other types of browsers – Cécile Fecherolle Feb 18 '22 at 10:15

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

is it possible to change?

just using by CSS

the short answer is no, It's NOT possible.

the audio player is an object created by the browser itself, that's why it looks different depending on the browser you use.

if you want to customize the player in a way that work with all browsers without using 3rd party plugins or scripts you'll need to customize and handle it yourself.

it's fairly simple using This DOM Reference

you'll need to hide the default player and create your own buttons and refer to the audio object.

for examplle you can give your audio object an id like "myAudio"

<audio id="myAudio" controls="">
  <source src="http://www.sousound.com/music/healing/healing_01.mp3" type="audio/mpeg">
</audio>

now you control it using Javascript and the reference I linked above

var x = document.getElementById("myAudio"); 
x.play();
// OR
x.pause()

and you can listen to its Media Events too

x.onended = function(){
   //do something when audio ends
};

creating an advanced player with seeking and timers would take more effort and time but should be strait forward and easy.

if you don't want to go through the hassle of creating your own buttons and functions you'll have to get a plugin and customize its CSS if necessary.

More inforamtion:

HTML5 audio in detail

Creating your own custom audio player

HTML Audio/Video DOM Reference

Change audio background color in HTML5 using css

2 Answers2

Linked