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）自然的不显示下载按钮。二者对禁用右键下载的支持却是一致的。