html5音频隐藏下载按钮答案

【问题标题】：html5 audio hide download buttonhtml5音频隐藏下载按钮
【发布时间】：2017-04-20 00:08:39
【问题描述】：

我使用下面的代码在公司门户（asp.net webform）中播放 .mp3 文件。

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

一切正常，但是当我使用 chrome 时，音频控件中会显示一个下载按钮。

audio download button

如何在不禁用其他控件的情况下隐藏或禁用下载按钮？

谢谢。

【问题讨论】：

标签： javascript asp.net html5-audio

【解决方案1】：

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

【讨论】：

【解决方案2】：

Google 自 chrome 58 以来添加了一项新功能。现在您可以这样做了：

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

【讨论】：

【解决方案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>

Click here to see the screenshot

【讨论】：

【解决方案4】：

我也遇到了同样的问题，我想要原生音频元素的便利，但有业务需求，我不想显示新的 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/

【讨论】：

我觉得应该对这段代码做一点小修改：background-color: #fafafa;

【解决方案5】：

检查这个语法

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

我在 Chrome 上试了一下，效果很好。见this example。

【讨论】：

下载按钮仍然存在...我需要禁用它。
您使用的是哪个 Chrome 版本？
版本 55.0.2883.75 m。我认为是最新的。