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>

Answer 1

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

Answer 2

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