controlslist="nodownload"仅在chrome/edge等chromium内核浏览器中有效，用于隐藏原生音频控件中的下载按钮，但无法真正阻止下载，用户仍可通过开发者工具、网络面板或直接请求src地址获取文件。
controlsList 属性在 Chrome 和 Edge 中才有效
这个属性根本不是标准 HTML 属性，而是 Chromium 内核浏览器（Chrome、Edge、新版 Opera）的私有扩展，Firefox 和 Safari 完全忽略它。所以如果你希望“隐藏下载按钮”，必须先确认目标用户主要用什么浏览器——否则加了 controlsList 也毫无作用。
它只能配合 <audio controls></audio> 使用，单独加在无 controls 的 audio 上无效。而且即使支持，也只影响原生控件外观，不影响右键菜单或开发者工具里的资源导出。
怎么用 controlsList 隐藏下载按钮
给 <audio></audio> 标签加上 controlsList="nodownload" 即可。注意：它不接受空格分隔多个值（早期文档有误），必须写成连写形式；多个控制项要全部列出，比如同时禁下载和禁全屏就得写 controlsList="nodownload nofullscreen"。
-
nodownload：隐藏下载按钮（仅限 Chromium） -
nofullscreen：隐藏全屏按钮 -
noresizelayout：禁用布局缩放（已废弃，忽略即可）
示例：
<audio controls controlslist="nodownload"><source src="audio.mp3" type="audio/mpeg"></source></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" 只是个视觉遮盖，不是安全机制。真要防下载，别指望前端属性——该上服务端验证的地方，一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
