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.

回答1:

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).

回答2:

Try this:

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

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

回答3:

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).

来源：https://stackoverflow.com/questions/48331091/audio-tag-without-a-volume-slider-or-mute-button