CODEWITHSUNDEEP
javascriptcsshtml
Ted
Ted

Reputation: 85

Remove mute/volume bar from standard Html5 audio player?

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.

Upvotes: 8

Views: 16135

Answers (2)

Lars Eivind
Lars Eivind

Reputation: 183

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

Upvotes: 1

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

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.

enter image description here

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.

Upvotes: 5

Related Questions