嘎里三分熟
  • 首页
  • JMusic
  • TSBay
  • 常用工具
  • About Me
  • 留言板
一行代码一世浮生
  1. 首页
  2. Java web
  3. JavaScript
  4. 正文

Chrome下隐藏audio标签的下载按钮

2018年02月02日 6474点热度 3人点赞 0条评论

一、jQuery控制播放和暂停

<audio id="audio" src='helloWorld.mp3'></audio>

    有如上所示的 audio 标签,如下代码便是使用 jQuery 来控制播放和暂停。

    需要注意的是,[0] 才是对应的节点对象。

$("#audio")[0].play();//播放
$("#audio")[0].pause();//暂停

二、在 Chrome 浏览器下如何禁用下载按钮

audio01.png

    如图所示,在 Chrome 浏览器下,便自动生成了下载的按钮,哎,开始我们想取消掉它,有如下几种方式可以采用:

    1、controlsList="nodownload"

        此方法的弊端在于,Chrome 的版本至少是 58,低于则无效,具体可以参考 controlslist.html ,controlsList在线例子:

<audio id="audio" src='helloWorld.mp3' controls="controls" controlsList="nodownload"></audio>

                     

    2、CSS 方式来隐藏

        这个就厉害了,全面兼容 Chrome各大版本:     

audio::-webkit-media-controls {
    overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

    3、禁用右键

        这招只能说是比较贱,禁用了 audio 的右键,但是这点小东西怎能难住程序员。

 <audio id="audio" src='helloWorld.mp3' controls="controls" controlsList="nodownload" oncontextmenu="return false"></audio>

    4、插件

        当然了,你也可以不直接使用 audio 标签,自己写或者使用插件去实现。

        如:audiojs

参考:

    https://segmentfault.com/a/1190000009737051

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: audio JS
最后更新:2018年02月02日

GoldenJet

爱折腾技术的90后漫威小死忠程序员一枚

点赞
< 上一篇
下一篇 >

文章评论

取消回复

通过电子邮件订阅博客

分类目录
  • BootStrap (2)
  • Bug集中营 (6)
  • Java web (3)
  • JavaScript (7)
  • Java基础 (17)
  • Java工具 (5)
  • Linux (3)
  • Python (3)
  • SpringBoot (14)
  • Spring基础 (8)
  • thymeleaf (1)
  • 娱乐 (3)
  • 小谈 (2)
  • 常用工具 (7)
  • 技术分析集 (5)
  • 技能 (10)
  • 源码 (4)
  • 科普类 (1)
  • 算法 (9)
  • 踩坑记 (5)
文章归档
  • 2020年11月 (1)
  • 2020年7月 (1)
  • 2020年4月 (2)
  • 2020年3月 (1)
  • 2020年1月 (1)
  • 2019年11月 (1)
  • 2019年10月 (1)
  • 2019年9月 (1)
  • 2019年8月 (1)
  • 2019年7月 (2)
  • 2019年5月 (2)
  • 2019年4月 (2)
  • 2019年3月 (3)
  • 2019年2月 (2)
  • 2019年1月 (2)
  • 2018年12月 (2)
  • 2018年11月 (3)
  • 2018年10月 (3)
  • 2018年9月 (2)
  • 2018年8月 (3)
  • 2018年7月 (2)
  • 2018年5月 (1)
  • 2018年4月 (3)
  • 2018年3月 (2)
  • 2018年2月 (3)
  • 2018年1月 (5)
  • 2017年12月 (2)
  • 2017年11月 (3)
  • 2017年10月 (1)
  • 2017年9月 (1)
  • 2017年8月 (1)
  • 2017年7月 (7)
  • 2017年6月 (5)
  • 2017年5月 (1)
  • 2017年4月 (2)
  • 2017年3月 (4)
  • 2017年2月 (2)
小伙伴友链
  • 前端驿站

COPYRIGHT © 2017-2023 嘎里三分熟. ALL RIGHTS RESERVED.

浙ICP备17005575号-1

浙公网安备 33010802009043号