参考链接: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. 在centos7中离线方式安装mysql5.7

    第一步:下载mysql 在Linux终端使用wget命令下载网络资源:(可以先下好) wget http://mirrors.sohu.com/mysql/MySQL-5.7/mysql-5.7.17 ...

  2. from flask.ext.wtf import Form导入报错

    问题来源: 在学习Flask网上教程(PS:中文版教程链接,英文版教程其中代码是对的,运行没错误,我为了看的快一些,所以就直接看的中文版>~<,英文版教程链接)时,使用如下代码: from ...

  3. spring mvc防止表单重复提交的代码片段

    1.定义一个token接口 package com.bigbigrain.token; import java.lang.annotation.Documented; import java.lang ...

  4. Spring面试题一

    目录一.Spring工作原理 二.为什么要用Spring三.请你谈谈SSH整合四.介绍一下Spring的事务管理五.什么是依赖注入,依赖注入的作用是什么? 六.什么是AOP,AOP的作用是什么? 七. ...

  5. MongoDB高可用架构:Replica Sets+Sharding

    MongoDB的sharding解决了海量存储和动态扩容的问题.但是遇到单点故障就显得无能为力了.MongoDB的副本集可以很好的解决单点故障的问题.所以就有了Sharding+Replica Set ...

  6. 关于XCode更换项目名称

    1.打开项目直接修改项目名称 2.直接修改分组名 3.然后.command+B会报错 4.找到项目源文件 YourProject.xcodeproj  - > 右键显示包内容->找到pro ...

  7. climbing-stairs-动态规划,爬楼梯的路径数

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  8. Cocos2d-x-Lua演示样例项目HelloLua

    Cocos2d-x-Lua演示样例项目HelloLua 本篇博客介绍Cocos2d-x中Lua的实例项目,就是使用Cocos2d-x创建的初始项目执行所呈现的农场,这里笔者取名为HelloLua.本篇 ...

  9. idea 配置maven

      1.情景展示 idea如何配置maven 2.解决方案 设置 输入maven-->更改maven的根目录 更改默认的setting.xml的位置 改成maven下的默认settings.xm ...

  10. thunderbird中如何设置QQ邮箱

    thunderbird和其他客户端设置是类似的. 我们发现您尝试设置POP3/SMTP服务,但设置未成功. 您可以检查以下的细节来解决:  您是否在邮箱中开启了这项服务,如果尚未开启,请您在[邮箱设置 ...