html5 audio hide download button

Question

I Use the code below to play .mp3 files in a company portal (asp.net webform).

 <audio id="player" style="margin-top:10px;margin-bottom:10px" src="audio/aaa.mp3" controls loop autoplay></audio>

Everything works fine, but when I use chrome a download button is visible within the audio controls.

audio download button

How can I hide or disable the download button, without disable the other controls?

Thanks.

Answer 1

Google added a new feature since chrome 58. Now you can do this :

<audio width="400" height="38" controls controlsList="nodownload">
    <source data-src="...." type="audio/mpeg">
</audio>

More info here

https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

Answer 2

I have run into the same issue, where I want the convenience of the native audio element but have business requirements where I don't want to show the new Chrome download button.

I made a hacky solution where I position a masking div over the download button to hide it, if I detect Chrome 55 or above.

<div id="player">
  <audio src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Fur_Elise.ogg" controls></audio>
  <div id="mask"></div>
</div>

<style media="screen">
#player {
  position: relative;
  width: 300px;
}
#mask {
  display: none;
  background-color: #F3F5F6; /* match the background color of the page */
  position: absolute;
  width: 34px;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10
}
</style>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
  var match = navigator.userAgent.match(/Chrome\/(\d+)/);
  if (match && parseInt(match[1]) >= 55) {
    document.getElementById('mask').style.display = 'block';
  }
});
</script>

https://jsfiddle.net/keeth/bqdc4uL7/6/