Problem
I haven’t been able to find any information on how to do this. It would be good to have something as simple as changing the player’s color:)
Asked by rabidmachine9
Solution #1
<audio>
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button
REFERENCE: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F
Answered by Fábio Zangirolami
Solution #2
Yes, you may disable the built-in browser UI (by deleting the controls attribute from audio) and instead use Javascript to create your own interface and control playing (source):
<audio id="player" src="vincent.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume += 0.1">Vol +</button>
<button onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
</div>
You may then use CSS to style the elements however you like.
API reference for HTMLAudioElement on MDN
Answered by gilad905
Solution #3
Yes! The “controls” element on the HTML5 audio tag uses the browser’s default player. You can personalize it to your desire by creating your own controls and communicating with the audio API using javascript instead of utilizing the browser controls.
Fortunately, others have already done so. Right now, my favorite player is jPlayer, which is incredibly customizable and works well. Take a look at it.
Answered by Benny
Solution #4
The tag’s appearance is browser-dependent, but you can conceal it, create your own interface, and use Javascript to control the playback.
Answered by Mihai
Solution #5
some color tunings
audio {
filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
width: 200px;
height: 25px;
}
Answered by Arthur Veselov
Post is based on https://stackoverflow.com/questions/4126708/is-it-possible-to-style-html5-audio-tag