Audio tag without a volume slider or mute button?

html audio volume slider
audio without control in html
audio tag not working in chrome
audio src
html audio controls size
html audio controls style
play audio onclick html5
html5 streaming audio player code

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.

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

html5 - Audio tag without a volume slider or mute button?, The new controlslist attribute in the HTML5 standard can only accept three settings: "nodownload", "nofullscreen" and "noremoteplayback". There are none to  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. But there is not way to have only some of the controls displayed.

Try this:

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

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

Audio Volume: Quick & Easy HTML Guide For Setting Initial Volume », volume, 0.0–1.0, Specifies the initial volume setting of the to the browser, which the browser may or may not follow. muted, Specifies that the volume on the audio player should initially be muted. Step 2: Right-click on the sound icon in the taskbar and choose Open Volume mixer. Step 3 : Make sure Chrome is not on mute, and volume levels are reasonably high.

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

Controlling Audio & Advanced Techniques (Play, Pause, Rewind , Browsers do not want audio to play at random point in time without any user action. For more information Creating volume slider for Hype audio element. Timeline Action control question. How to make a toggle button to toggle Audio Mute? If you only want to mute a movie, sound file, or audio in programs, most programs include a configuration option to mute the audio through the program or audio player. Look for a sound icon and click the icon to either open the sound properties or mute the sound.

HTML Audio Tag: Cheat Sheet & Real-World Examples 2020, The HTML audio tag allows the embedding of sound files into a web page. .​mp3 : Supported by all modern browsers. .wav : Not supported by Internet Explorer. getElementById('player').volume+=0.1">Volume Up</button> <button named MediaElement.js allows you to have much more control on your audio elements. You can also add muted="true" to your audio element in plain js, and muted={true} for React :) Tho this isn't for a custom button - it will be helpful to someone. – zero_cool Jul 8 '17 at 19:47

694664 - Remove html5 audio/video volume slider, In bug 649490, we decided to remove the html5 audio/video volume slider. If we want to have the default mute button display this composite volume+mute may complain that they are losing granular control (whether they needed it or not)​. To change just the colour of the player, simply address the audio tag in your css file, for instance on one of my sites the player became invisible (white on white) so I added: audio { background-color: #95B9C7; }

<audio>: The Embed Audio element, The HTML audio element is used to embed sound content in documents. controls to allow the user to control audio playback, including volume, seeking, In other words, it sends the Origin: HTTP header without a cookie, X.509 the audio player (e.g. change the button size or icons, change the font, etc.)  Specifies the current volume of the audio/video. Must be a number between 0.0 and 1.0. Example values: 1.0 is highest volume (100%. This is default) 0.5 is half volume (50%) 0.0 is silent (same as mute)

Comments
  • Did not find that site when googling!
  • But controlslist="nodownload" was successfully removing the download button, which should be a contradiction to controls to be the only available attribute.
  • There is no download button in an HTML5 tag
  • You see it in my screenshot.
  • Look at these screenshots of the HTML5 audio player in the most common browsers: html5tutorial.info/html5-audio.php Your screenshot is definitely something else, but not a default HTML5 audio element.
  • It seems that Chrome is the only browser that shows the download button. Chrome is the only browser that shows the download button. It has supported controlsList="nodownload" since Chrome 55.