CODEWITHSUNDEEP
htmlgoogle-chromehtml5-audio
Anders Lindén
Anders Lindén

Reputation: 7323

Audio tag without a volume slider or mute button?

I created an audio tag without a download button with 

<audio controls controlslist="nodownload">

This was successful.

Now, how do I remove the volume slider (plus mute button) that comes up when I play the sound?

I tried 

<audio controls controlslist="novolume">

without any luck.

result

Upvotes: 4

Views: 14040

Answers (3)

Losses Don
Losses Don

Reputation: 983

Try this:

audio::-webkit-media-controls-mute-button {
    display: none !important;
}

audio::-webkit-media-controls-volume-slider {
    display: none !important;
}

Upvotes: 8

user1693593
user1693593

Reputation:

The new controlslist attribute in the HTML5 standard can only accept three settings: 

"nodownload", "nofullscreen" and "noremoteplayback".

There are none to control specific controls beside from that. The only (current) workaround for this is to build your own custom interface for the audio object and provide only the controls you want the user to access via the UI.

The attribute is currently only supported in Chrome and Opera, as well as Android. This of course being another incentive to build a custom UI for the audio (or use a library as suggested by Johannes).

Upvotes: 6

Johannes
Johannes

Reputation: 67798

For the HTML5 audio tag there is only controls or nothing, and each browser will display it a little differently. But there is not way to have only some of the controls displayed.

To achieve that, you'd have to use a javascript/jQuery player like jPlayer ( http://jplayer.org/) that allows complete individual cofiguration of the UI (but still uses HTML5 in the background).

Upvotes: 1

Related Questions