Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the control colors in the HTML5 audio tag [duplicate]

Is it possible to change the 'play', 'pause', and 'volume' colors in the HTML5 audio tag.

They have a very dark color when using Firefox and they make the player look disabled.

like image 633
alloyoussef Avatar asked Jun 23 '14 13:06

alloyoussef


People also ask

How do you change the color of an audio control in HTML?

Answer: No. Currently, you cannot change the color of the controls of the HTML5 audio tag. If you enable the controls attribute, the appearance of the 'play', 'pause', and 'volume' will be dependent on the browser.

Can you style HTML5 audio tags?

HTML 5 audio tags can be styled. By using the audio tag with “controls” attribute, the default browsers player is used. You can customize by not using the browsers controls. You can also add CSS classes to each one of the elements and style them accordingly.

How do I change the audio control in CSS?

Add the CSS Styles . audio-player { --player-button-width: 3em; --sound-button-width: 2em; --space: . 5em; ... } The --sound-button-width will be used for the width of the sound button, and --space will be used to add space between the track and the button.


1 Answers

Answer: No. Currently, you cannot change the color of the controls of the HTML5 audio tag. If you enable the controls attribute, the appearance of the 'play', 'pause', and 'volume' will be dependent on the browser.

With more work though, you can use JavaScript to create your own audio player interface that connects to the audio element's API.

Your question is a more focused version of what was asked here:

Is it possible to style html5 audio tag?

And here are some articles on how to create a unique audio player:

http://serversideup.net/style-the-html-5-audio-element/

http://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player--webdesign-7081

like image 127
Jordan L. Osier Avatar answered Oct 12 '22 16:10

Jordan L. Osier