参考链接:https://wdd.js.org/audio-hide-download-icon.html

1. controlsList=”nodownload”
// 这个方法只支持 Chrome 58+, 低于该版本的是没有无法隐藏的

<audio src="/record/test.wav" controls="controls" controlsList="nodownload"></audio>

controlsList属性只兼容Chrome 58+以上,具体可以参考controlslist.html ,controlsList在线例子

nodownload: 不要下载
nofullscreen: 不要全屏
noremoteplayback: 不要远程回放

2. css方式来隐藏

// 这个方式兼容所有版本的谷歌浏览器
audio::-webkit-media-controls {
  overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
  width: calc(% + 32px);
  margin-left: auto;
}

3. 即使让下载按钮隐藏了,如何禁止右键下载?
// 给audio标签禁止右键,来禁止下载

<audio src="/record/test.wav" controls="controls" controlsList="nodownload" oncontextmenu="return false"></audio>

补充说明:

经测试,firefox(版本55.0.3)天然的不显示下载按钮。两者对禁用右键下载的支持倒是一致的。

html5 audio组件禁止下载的更多相关文章

  1. [jPlayer] HTML5 Audio & Video for jQuery

    ---------------------------------------------------------------------------------------------------- ...

  2. Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

  3. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  4. 开大你的音响,感受HTML5 Audio API带来的视听盛宴

    话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...

  5. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  6. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  7. 谷歌浏览器:audio如何隐藏下载按钮

    当我们使用原生的audio标签时,可以看到如下的效果. 那么如何让下载按钮隐藏掉呢? 1. controlsList="nodownload" // 这个方法只支持 Chrome ...

  8. HTML5 audio 如何实现播放多个MP3音频

    <audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...

  9. 7个效果震憾的HTML5应用组件

    在HTML5的世界里,任何文本.图像都可以变得令人难以想象,很多HTML5应用也都已经随着浏览器的升级而变得运行飞速,而且兼容性也越来越好.下面为大家介绍7款效果震憾的HTML5应用组件,HTML5是 ...

随机推荐

  1. android studio中为项目添加依赖包的方法

    右键项目,Open Module Settings 打开后选择Dependencies选项卡,点最右边的加号: 选择Libriay dependencies,从下拉列表里面选择就可以了.

  2. Objective-C编程 - 1. 浅谈内存分配

    Objective-C语言的对象类型都必须用指针,对象所占的内存是在堆(heap)上分配的. NSString也必须在堆上分配,因此必须用指针. NSString *someString = @&qu ...

  3. Python过滤emoji

    参考博客:http://my.oschina.net/jiemachina/blog/189460 1. 将emoji表情替换为指定字符串 import re def filter_emoji(des ...

  4. oracle数据分组

    一,什么是分组函数 分组函数作用于一组数据,并对一组数据返回一个值 二,分组函数类型 Avg ,count,max,min,stddev(标准方差),sum. 函数名称 函数描述 Count 返回找到 ...

  5. SQL Server 中断开连接到指定数据库的所有连接

    常用的情形是在部署测试数据库时需要通过SQL代码自动重新创建数据库,在删除的时候往往会发生错误,错误信息一般会指出目前有用户连接到这个数据库上,因此不能删除. 实现的方式是通过查询指定数据库中活跃的 ...

  6. 第八周(2) Word邮件合并1

    源自:http://www.sxszjzx.com/~c20/12-2/office-gj/files/8-2/8-2.html 第八周(2) Word邮件合并1 教学时间 2013-4-16 教学课 ...

  7. C++ 第六课:C/C++关键字及其用法

    asm 插入一个汇编指令. auto 声明一个本地变量. bool 声明一个布尔型变量. break 结束一个循环. case 一个switch语句的一部分. catch 处理 thrown 产生的异 ...

  8. 斯坦福《机器学习》Lesson1-3感想-------3、线性回归二

    从上一篇可知.在监督学习里最重要的就是确定假想函数h(θ),即通过使得代价函数J(θ)最小,从而确定h(θ). 上一篇通过梯度下降法求得J(θ)最小,这篇我们将使用矩阵的方法来解释. 1.普通最小二乘 ...

  9. 如何根据搜索页面内容得到的结果生成该元素的xpath路径

    如何根据搜索页面内容得到的结果生成该元素的xpath路径?

  10. Linux日志文件utmp、wtmp、lastlog、messages

            1.有关当前登录用户的信息记录在文件utmp中:==who命令 2.登录进入和退出纪录在文件wtmp中:==w命令 3.最后一次登录文件可以用lastlog命令察看: 4.messag ...