帶下載按鈕的html5音頻

Question

我使用下面的代碼在公司門戶網站（asp.net webform）中播放.mp3文件。

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

一切正常，但是當我使用chrome時，音頻控件中會顯示下載按鈕。

音頻下載按鈕

如何在不禁用其他控件的情況下隱藏或禁用下載按鈕？

謝謝。

Answer 1

谷歌自Chrome 58以來增加了一項新功能。現在你可以這樣做：

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

更多信息在這里

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

Answer 2

我遇到了同樣的問題，我想要原生音頻元素的便利，但有業務要求，我不想顯示新的Chrome下載按鈕。

我做了一個hacky解決方案，如果我檢測到Chrome 55或更高版本，我會在下載按鈕上放置一個屏蔽div來隱藏它。

<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

當使用HTML5音頻時，這可以隱藏Chrome上的下載按鈕。

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

點擊此處查看截圖

Answer 4

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

Answer 5

檢查此語法

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

我在Chrome上嘗試這個並且運行正常。 看這個例子 。