Html5 audio with download button

Question

I use the code below to play .mp3 files on a company portal (asp.net web form).

<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, the download button appears inside the audio controls.

audio download button

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

Thanks.

Answer 1

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

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

More here

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

Answer 2

I ran into the same problem where I want the convenience of my own sound element, but have business requirements when I don't want to show the new Chrome download button.

I made a hacker decision where I put a masking div above the download button to hide it if I detect Chrome 55 or higher.

 <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/

Answer 3

This may hide the download button in Chrome when using HTML5 Audio.

  #aPlayer > audio { width: 100% } /* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { /* HIDE DOWNLOAD AUDIO BUTTON */ #aPlayer { overflow: hidden;width: 390px; } #aPlayer > audio { width: 420px; } } /* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { #aPlayer { overflow: hidden;width: 390px; } #aPlayer > audio { width: 420px; } } 

 <div id="aPlayer"> <audio autoplay="autoplay" controls="controls"> <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" /> </audio> </div> 

Click here to view a screenshot.

Answer 4

Check this syntax

 <audio controls> <source src="audio/aaa.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> 

I try this on Chrome and work great. See this example .

Answer 5

  #aPlayer > audio { width: 100% } /* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { /* HIDE DOWNLOAD AUDIO BUTTON */ #aPlayer { overflow: hidden;width: 390px; } #aPlayer > audio { width: 420px; } } /* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { #aPlayer { overflow: hidden;width: 390px; } #aPlayer > audio { width: 420px; } } 

 <div id="aPlayer"> <audio autoplay="autoplay" controls="controls"> <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" /> </audio> </div>