I am using the HTML5 audio tag on a website I'm maintaining. I noticed that the audio tag has a download icon embedded in it. How do I remove that option? I want the audio to be read (playback) only. Is there a way to do this without JavaScript or jQuery? I don't know either one yet.

I am using the HTML5 audio tag on a website I'm maintaining. I noticed that the audio tag has a download icon embedded in it. How do I remove that option? I want the audio to be read (playback) only. Is there a way to do this without JavaScript or jQuery? I don't know either one yet.

• javascript
• jquery
• html
• audio

• 2 If you're hoping to employ that as copy protection: it's not that simple. In order to read (playback) the audio, the browser must already have downloaded the file (perhaps to a temporary file on disk). Saving it to a more permanent file from there is a trivial step… – deceze ♦ Commented Feb 28, 2017 at 19:27
• What browser? Are you using a media library that supplies its own UI (i.e., not the controls supplied by the HTML <audio> element)? Can you supply a screenshot in the question? (Or, if it won't let you because you're a new user, can you link to a screenshot?) – apsillers Commented Feb 28, 2017 at 19:44

5 Answers 5

To remove the download option from the UI add controlsList="nodownload" attribute

        <audio
           controls
           controlsList="nodownload">

        </audio>

Here is the function that I have used for WordPress to get the desired results. Hope it helps...

function disable_audio_download() {
?>
<script>
    document.querySelectorAll('.wp-block-audio audio').forEach(audio => audio.setAttribute('controlsList', 'nodownload'));
</script>
<?php
}
add_action('wp_footer', 'disable_audio_download');

Try this might it help you. It is not the best way but I think it will solve your problem.

audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

Just add this controlsList="nodownload" right above the controls like this:

<audio
      id="audio-element"
      controlsList="nodownload"
      controls
      className="w-full rounded-lg p-2 bg-gray-200 border border-gray-400"
    >
      <source
        src={`http://localhost:3000/api/audiobook/stream/${audioBook?._id}`}
        type="audio/mpeg"
      />
      Your browser does not support the audio element.
    </audio>

There is nothing on the audio element interface that controls only the download button. There is the controls attribute, which is a Boolean attribute, just shows or hides all of the controls on the audio UI.