html5 audio组件禁止下载

参考链接：https://wdd.js.org/audio-hide-download-icon.html

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

<audio src="/record/test.wav" controls="controls" controlsList="nodownload"></audio>

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标签禁止右键，来禁止下载

<audio src="/record/test.wav" controls="controls" controlsList="nodownload" oncontextmenu="return false"></audio>

 

补充说明：

经测试，firefox（版本55.0.3）天然的不显示下载按钮。两者对禁用右键下载的支持倒是一致的。