Remove mute/volume bar from standard Html5 audio player?

Question

Given the standard html5 audio player,

HTML:

<audio controls></audio>

(Picture)

Is there a way to remove only the "mute" button and volume slider? I'd like to keep the play/pause button and the track-position slider.

Answer 1

To change these you can use some crafty CSS. With the border radius altered on the right hand side this looks like what you are after.

See this js fiddle http://jsfiddle.net/3j76551r/1/

 div {
    width: 260px;
    overflow: hidden;
    direction: ltl;
    border-top-right-radius: 0.5em 0.5em;
    border-bottom-right-radius: 1em 0.7em;
}

Another option would be the javascript option. This would be to write your own player using the html audio element. There is a really good tutorial here that I have done in the past that teaches you how to write your own player with javascript.

Answer 2

I found a way to solve this by manipulating the css, specific to the audio tag. This way, you can remove and modify elements related to the controls container. Please have a look here for further details: https://stackoverflow.com/a/64012853/13334628