5

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>
14
  • 1
    Possible duplicate of Custom CSS for <audio> tag? May 20, 2016 at 6:38
  • @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 jsfiddle.net/BDhara/pzdg2pjp/1 ...I want to change background color only
    – Dhara
    May 20, 2016 at 6:40
  • first line of the accepted answer: "There is not currently any way to style HTML5 <audio> players using CSS." May 20, 2016 at 6:42
  • Yeah that was written before six years ago that's why my question's last line is is it possible?
    – Dhara
    May 20, 2016 at 6:43
  • 1
    you you notice it is working... jsfiddle.net/rajsharma1612/eg6ghhge
    – RajSharma
    May 20, 2016 at 6:58

2 Answers 2

15
audio::-webkit-media-controls-play-button,
     audio::-webkit-media-controls-panel {
     background-color: #000;
     color: #000;
     }
2
  • 4
    Please add some explanation to your answer such that others can learn from it
    – Nico Haase
    Aug 27, 2020 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 Feb 18, 2022 at 10:15
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.