How to customize HTML5 audio controls without using javascript (Pure CSS)

Question

I need to customize my HTML5 audio control like this:

Can any one solve my problem?

Here is what I have so far:

audio::-webkit-media-controls-panel
{
 background-color:powderblue;
}
// 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-enclosure
// 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 


<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

Completely customizing an audio player with just css is not really an option. My recommendation would be to find a good javascript plug in that would be easy to customize yourself just through css. Don't want to plug too much but I've developed one myself if your interested. You can check it out here: https://github.com/CoryKleiser/audio-player — Cory Kleiser, May 03 '18 at 04:28
We are using Angular 2. It is based on typescript. Is it possible to use javascript in typescript. — Sakkeer A, May 03 '18 at 04:34
Being that typescript is a a superset of javascript, yes... typescript uses the same engine as javascript would (i.e. javascript will run with typescript well). If you include it in your project as a plugin it will be fine — Cory Kleiser, May 03 '18 at 04:36
@Cory Thanks, How to import javascript plugins to typescript. I can not get the best results. — Sakkeer A, May 03 '18 at 07:09
you can add the script to your `angular-cli.json` file under the `"scripts"` id like this: `"scripts": [ "PATH/TO/EXTERNAL/JSFILE.js" ]` — Cory Kleiser, May 03 '18 at 07:14

NVRM · Answer 1 · 2018-05-03T18:47:37.683

We are forced to use per browser special css like you shown, to modify button aspects. This is built-in in browser.

It would be easier to make the button yourself and control with js (very easy nowadays, no need for a plugin). onclick="player.play()" for example.

Or we can hack the apparence with css filters on them. It won't change the aspect but add some effects, try to mouse over the button.

For the example, button and some details are on the same green, obtained with the hue-filter. It will actually render greeny on all browsers.

The invert filter will display in black if the default is white, etc. .

audio {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(46deg) invert(12%);
  }

<audio 
       controls
       src="http://www.ektoplazm.com/mp3/cybered-and-opsy-children-of-paradise.mp3"></audio>

See this script i use to make, to see what is doable with css filters.

https://codepen.io/Nico_KraZhtest/pen/bWExEB

Edit: See the following simple base javascript solution: clicking the image will start the (hidden) player...

audio {width:0px}
img {cursor:pointer}

<audio 
       id="player"
       controls
       src="http://www.ektoplazm.com/mp3/cybered-and-opsy-children-of-paradise.mp3"></audio>

<img onclick="player.play()" src="https://i.stack.imgur.com/6pUED.png">

Thanks. But, how do i can get the exact design. Like the picture above. — Sakkeer A, May 03 '18 at 14:29
You can't without using javascript. As you specifically told! Anyway, if you decide to do so: there is some native binding: make button as images, with action on click! see: https://www.htmlgoodies.com/html5/javascript/build-an-html5-audio-player.html https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio Ask another question if you want to use javascript, but don't expect us to make your homework, keys in hand! Good devs never asks, they search themself, they experiment, they take their own conclusion — NVRM, May 03 '18 at 18:38

How to customize HTML5 audio controls without using javascript (Pure CSS)

1 Answers1