有时候我们喜欢分享一些音频音乐,大部分应该会用插件来实现,调用网易或者QQ音乐。但是毕竟不是每首歌都能在某一平台找到,或者音质不理想,所以往往使用audio标签也就能满足了。但是audio标签的前台显示会有一个下载按键或者能右键另存为,这个就很不讨喜,如何隐藏呢?
正常情况下,我们使用audio标签分享音频,前台显示会出现如下效果,会有一个下载的按钮,这个完全没有必要,还有不好的影响,所以我们尽量隐藏掉它。

谷歌浏览器audio

360浏览器audio
这里简单说几种方法,当然对应每种浏览器效果会有不同,大家可以酌情考虑使用。闲鱼这里只测试了谷歌浏览器、火狐浏览器、360浏览器。
使用controlsList隐藏
controlsList属性只兼容Chrome 58+以上,此方法适用于谷歌浏览器、360浏览器等。代码中(audio括号改为<
// 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的
(audio src="/i/horse.ogg" controls="controls" controlsList="nodownload">
Your browser does not support the audio element.
- nodownload: 不要下载
- nofullscreen: 不要全屏
- noremoteplayback: 不要远程回放

360浏览器audio
使用css隐藏
css代码可以自己适当修改,以下是闲鱼修改后的样式,此方法适用于谷歌浏览器等。
audio::-webkit-media-controls {
overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
width: calc(100% + 40px);
margin-left: auto;
}
audio {
border-radius: 50px;
}
禁止右键另存为(下载)
按照上述方法,我们确实能隐藏浏览器给audio标签自带的下载按钮,但是当我们对audio文件右键的时候,还是会出现音频另存为(下载)的效果,那我们也可以将其禁止掉。使用oncontextmenu禁止右键效果,此方法适用于谷歌浏览器、火狐浏览器、360浏览器等。代码中(audio括号改为<
// 给audio标签禁止右键,来禁止下载
(audio src="/i/horse.ogg" controls="controls" controlsList="nodownload" oncontextmenu="return false">
Your browser does not support the audio element.
历史上的今天:
- 2020: 华医网:实验室检验项目性能验证和分析后质量保证
- 2017: WordPress纯代码实现展示最近更新过的文章
- 2016: 义乌通报破获网购系列诈骗案 大学生利用微店漏洞骗货
- 博客公众号
- 关注本博客公众号
-
- 博客小程序
- 关注本博客小程序
-
2020年5月31日 下午4:46 5楼
请问!!!除了css那个代码,第一和第三段代码是放在哪里的呀!!
2020年5月31日 下午9:18 1层
@chen 使用的时候用第一个或者第二个就是了
2019年11月17日 上午10:01 4楼
这是为了配合WordPress5.3嘛,哈哈。还是防君子不防小人,真想下的该嗅探嗅探,该看代码看代码!
2019年11月17日 上午10:21 1层
@缙哥哥 主要是防手贱的,看到个下载按钮就点,哈哈
2019年8月14日 上午12:02 地板
不错不错
2019年7月25日 上午10:49 板凳
确实有用,哈哈
2019年7月22日 下午11:36 沙发
好方法!
2019年7月23日 下午6:11 1层
@心灵博客
互相学习