controlsList="nodownload"仅在Chrome/Edge等Chromium内核浏览器中有效,用于隐藏原生音频控件中的下载按钮,但无法真正阻止下载,用户仍可通过开发者工具、网络面板或直接请求src地址获取文件。

controlsList 属性在 Chrome 和 Edge 中才有效
这个属性根本不是标准 HTML 属性,而是 Chromium 内核浏览器(Chrome、Edge、新版 Opera)的私有扩展,Firefox 和 Safari 完全忽略它。所以如果你希望“隐藏下载按钮”,必须先确认目标用户主要用什么浏览器——否则加了 controlsList 也毫无作用。
它只能配合 <audio controls> 使用,单独加在无 controls 的 audio 上无效。而且即使支持,也只影响原生控件外观,不影响右键菜单或开发者工具里的资源导出。
怎么用 controlsList 隐藏下载按钮
给 <audio> 标签加上 controlsList="nodownload" 即可。注意:它不接受空格分隔多个值(早期文档有误),必须写成连写形式;多个控制项要全部列出,比如同时禁下载和禁全屏就得写 controlsList="nodownload nofullscreen"。
-
nodownload:隐藏下载按钮(仅限 Chromium) -
nofullscreen:隐藏全屏按钮 -
noresizelayout:禁用布局缩放(已废弃,忽略即可)
示例:
立即学习“前端免费学习笔记(深入)”;
<audio controls controlsList="nodownload"> <source src="audio.mp3" type="audio/mpeg"> </audio>
为什么加了 nodownload 还能下载?
常见误解是以为这个属性能“禁止下载”,其实它只是隐藏 UI 按钮。用户仍然可以通过以下方式拿到音频文件:
- 右键 → “检查” → Elements 面板里找
src地址,直接粘贴到新标签页打开 - Network 面板过滤
media或audio,找到请求后右键“Open in new tab” - 用
fetch()或XMLHttpRequest直接请求src地址(只要没配 CORS 或服务端限制)
真正阻止下载得靠服务端手段:签名 URL、Referer 校验、Token 验证、或流式传输时动态生成临时地址并限时失效。
替代方案:自定义控件更可控
如果需要跨浏览器一致行为,或者想彻底移除下载入口,建议放弃原生 controls,改用 JS 自建播放器 UI。这样你可以完全掌控按钮逻辑:
- 用
audio.play()/audio.pause()控制播放 - 用
audio.currentTime和audio.duration做进度条 - 不提供任何下载相关按钮或链接
- 甚至可以监听
contextmenu事件并event.preventDefault()来禁右键(但防不住 DevTools)
不过要注意:自定义控件会丢失原生无障碍支持(如屏幕阅读器兼容性),需手动补 aria-* 属性。
说到底,controlsList="nodownload" 只是个视觉遮盖,不是安全机制。真要防下载,别指望前端属性——该上服务端验证的地方,一个都不能少。



















