使用audio标签播放音频怎样隐藏下载按钮？禁止另存为？

有时候我们喜欢分享一些音频音乐，大部分应该会用插件来实现，调用网易或者QQ音乐。但是毕竟不是每首歌都能在某一平台找到，或者音质不理想，所以往往使用audio标签也就能满足了。但是audio标签的前台显示会有一个下载按键或者能右键另存为，这个就很不讨喜，如何隐藏呢？

正常情况下，我们使用audio标签分享音频，前台显示会出现如下效果，会有一个下载的按钮，这个完全没有必要，还有不好的影响，所以我们尽量隐藏掉它。

使用audio标签播放音频怎样隐藏下载按钮？禁止另存为？

谷歌浏览器audio

使用audio标签播放音频怎样隐藏下载按钮？禁止另存为？

360浏览器audio

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

使用controlsList隐藏

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

  1. // 这个方法只支持 Chrome 58+， 低于该版本的是没有无法隐藏的  
  2. <audio src="/i/horse.ogg" controls="controls" controlsList="nodownload">  
  3.     Your browser does not support the audio element.  
  4. </audio>  
  • nodownload: 不要下载
  • nofullscreen: 不要全屏
  • noremoteplayback: 不要远程回放
使用audio标签播放音频怎样隐藏下载按钮？禁止另存为？

360浏览器audio

使用css隐藏

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

  1. audio::-webkit-media-controls {  
  2.     overflow: hidden !important  
  3. }  
  4. audio::-webkit-media-controls-enclosure {  
  5.     width: calc(100% + 40px);  
  6.     margin-left: auto;  
  7.       
  8. }  
  9. audio {  
  10. border-radius: 50px;  
  11. }  
使用audio标签播放音频怎样隐藏下载按钮？禁止另存为？

谷歌浏览器audio

禁止右键另存为（下载）

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

  1. // 给audio标签禁止右键，来禁止下载  
  2. <audio src="/i/horse.ogg" controls="controls" controlsList="nodownload" oncontextmenu="return false">  
  3.     Your browser does not support the audio element.  
  4. </audio>  

历史上的今天:

  • 博客公众号
  • 关注本博客公众号
  • weinxin
  • 博客小程序
  • 关注本博客小程序
  • weinxin

墙裂推荐本站使用的阿里云服务器  去试试>>

1核2G，100%CPU性能，114/年  丨  1核2G，100%CPU性能，118/年

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论：4   其中：访客  3   博主  1

    • 一天天世界
      回复 2019年8月14日 上午12:02  地板

      不错不错

      • 山泉
        回复 2019年7月25日 上午10:49  板凳

        确实有用，哈哈

        • 心灵博客
          回复 2019年7月22日 下午11:36  沙发

          好方法！