label点击无声音的根本原因是其click事件不被视为可靠用户手势，无法解锁音频播放权限；音效应绑定到关联input的click或change事件，或为label添加role="button"和tabindex="0"并立即调用play()。
label 点击没声音？根本原因是它不触发用户手势上下文
直接给 <label> 绑定 onclick 并调 new Audio().play()，在 Chrome、Firefox 甚至 Safari 上大概率失败，控制台报 DOMException: play() failed because the user hasn't interacted with the document yet。这不是 label 的 bug，而是浏览器策略：label 的 click 事件**不被视为可靠用户手势**（尤其当它 for 关联的是 <input type="checkbox"> 这类非按钮元素时），无法解锁音频播放权限。
用 for 属性关联 input 时，音效必须绑定到 input 的 click 或 change
如果 label 是为了控制一个 checkbox/radio，音效逻辑不能写在 label 上，得挪到关联的 input 元素上：
-
<input type="checkbox" id="toggle"><label for="toggle">开关</label>→ 音效代码必须监听document.getElementById('toggle').addEventListener('click', ...)，而不是 label - 用
change更稳妥：checkbox/radio 的状态变更才是真实交互意图，且不会因 label 被重复点击而误触发多次 - 移动端注意：iOS Safari 对
change的触发时机更可靠，比click少卡顿
label 本身要播音效？只能加 role="button" + 显式 tabindex
若 label 确实需要独立响应点击（比如纯文字按钮），它必须具备可交互语义：
- 加
role="button"告诉浏览器“这是个按钮”，否则 label 默认不可键盘聚焦 - 加
tabindex="0"让它能被 Tab 键选中，支持空格/Enter 触发 - 绑定
click事件时，必须同步调audio.play()，禁止任何延迟（setTimeout、Promise.then都会失效） - 推荐复用
Audio实例：const clickSfx = new Audio('click.mp3');放全局，每次点击只做clickSfx.currentTime = 0; clickSfx.play();
路径、格式、加载状态这三点最容易漏
即使手势合法，音效仍可能静音或报错，常见于：
立即学习“前端免费学习笔记（深入）”；
- 路径错误：
src指向 404 文件，浏览器静默失败，不抛异常 —— 用浏览器 Network 面板确认音频请求是否返回 200 - 格式单一：只提供
.mp3，但 Firefox 不支持；建议用<source>提供.mp3和.ogg双格式，或统一用 Opus（体积小、兼容好） - 未等加载完成就调
play()：特别是首次加载时，audio.readyState === 0（HAVE_NOTHING）。可在canplay事件后缓存可用状态，或直接 catch 错误并重试
最易被忽略的一点：iOS Safari 下，哪怕所有条件都满足，如果音频文件跨域（比如从 CDN 加载）且服务端没返回 Access-Control-Allow-Origin: *，play() 也会静默失败 —— 这个限制不报 CORS 错，只让音频无声。
