谷歌浏览器：audio如何隐藏下载按钮

当我们使用原生的audio标签时，可以看到如下的效果。

那么如何让下载按钮隐藏掉呢？

1. controlsList="nodownload"

// 这个方法只支持 Chrome 58+， 低于该版本的是没有无法隐藏的

controlsList属性只兼容Chrome 58+以上，具体可以参考controlslist.html ，controlsList在线例子

• nodownload: 不要下载
• nofullscreen: 不要全屏
• noremoteplayback: 不要远程回放

2. css方式来隐藏

// 这个方式兼容所有版本的谷歌浏览器
audio::-webkit-media-controls {
    overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

3. 即使让下载按钮隐藏了，如何禁止右键下载？

// 给audio标签禁止右键，来禁止下载

4. 第三方插件: audiojs

项目地址: https://github.com/kolber/aud...
优点： 简单，无依赖
缺点：异步插入的audio标签，每次还是需要重新调用audiojs.createAll()方法来重新实例化

// 1.


// 2.

效果图：

5 audio相关问题以及解决方案

• 关于动态生成的mp3在audio标签无法拖动的问题: (audio断点续传)

6 参考文献

• https://stackoverflow.com/que...
• https://stackoverflow.com/que...
• https://googlechrome.github.i...