下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。@H_502_1@

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

@H_502_1@

@H_502_1@@H_502_1@

@H_502_1@@H_502_1@

@H_502_1@

这里简单说几种方法，当然对应每种浏览器效果会有不同，大家可以酌情考虑使用。闲鱼这里只测试了谷歌浏览器、火狐浏览器、360 浏览器。@H_502_1@

controlsList 隐藏

controlsList 属性只兼容 Chrome 58+以上，此方法适用于谷歌浏览器、360 浏览器等。@H_502_1@

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

<audio src="/i/horse.ogg" controls="controls" controlsList="nodownload">@H_502_1@

Your browser does not support the audio element.@H_502_1@

</audio>@H_502_1@

nodownload: 不要下载@H_502_1@

nofullscreen: 不要全屏@H_502_1@

noremoteplayback: 不要远程回放@H_502_1@

@H_502_1@@H_502_1@

使用 css 隐藏

css 代码可以自己适当修改，以下是闲鱼修改后的样式，此方法适用于谷歌浏览器等。@H_502_1@

audio::-webkit-media-controls {@H_502_1@

overflow: hidden !important@H_502_1@

}@H_502_1@

audio::-webkit-media-controls-enclosure {@H_502_1@

width: calc(100% + 40px);@H_502_1@

margin-left: auto;@H_502_1@

 @H_502_1@

}@H_502_1@

audio {@H_502_1@

border-radius: 50px;@H_502_1@

}@H_502_1@

@H_502_1@@H_502_1@

禁止右键另存为（下载）

按照上述方法，我们确实能隐藏浏览器给 audio 标签自带的下载按钮，但是当我们对 audio 文件右键的时候，还是会出现音频另存为（下载）的效果，那我们也可以将其禁止掉。使用 oncontextmenu 禁止右键效果，此方法适用于谷歌浏览器、火狐浏览器、360 浏览器等。@H_502_1@

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

<audio src="/i/horse.ogg" controls="controls" controlsList="nodownload" oncontextmenu="return false">@H_502_1@

Your browser does not support the audio element.@H_502_1@

</audio>@H_502_1@

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。@H_502_1@ 原文链接：https://www.f2er.com/html/536367.html