Menu
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.
633
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.
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.
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.
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
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
