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

在使用audio标签时，碰到的一些坑，比如在chrome浏览器下如何禁用下载，比如如何使用jQuery来控制播放和暂停。

一、jQuery控制播放和暂停

<audio&nbsp;id="audio"&nbsp;src=&#39;helloWorld.mp3&#39;></audio>

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

    需要注意的是，[0] 才是对应的节点对象。
</p>

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

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

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

    1、controlsList="nodownload"

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

<audio&nbsp;id="audio"&nbsp;src=&#39;helloWorld.mp3&#39;&nbsp;controls="controls"&nbsp;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 的右键，但是这点小东西怎能难住程序员。

&nbsp;<audio&nbsp;id="audio"&nbsp;src=&#39;helloWorld.mp3&#39;&nbsp;controls="controls"&nbsp;controlsList="nodownload"&nbsp;oncontextmenu="return&nbsp;false"></audio>

    4、插件

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

        如：audiojs

参考：

    https://segmentfault.com/a/1190000009737051