html5音频隐藏下载按钮

新手上路,请多包涵

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

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

一切正常,但是当我使用 chrome 时,在音频控件中可以看到一个下载按钮。

音频下载按钮

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

谢谢。

原文由 Andy L. 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 507
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/

原文由 Keeth 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题