单选按钮音效应监听change事件而非click，用同一Audio实例复用并重置currentTime；需在用户交互回调内调用play()，移动端可加click兜底与防重复标志。
单选按钮点击音效不触发？检查事件绑定对象
直接给 <input type="radio"> 绑 onclick 通常无效——浏览器对原生表单控件的点击行为有拦截逻辑，尤其在 label 包裹或点击 label 触发时，input 自身可能根本没收到 click 事件。
正确做法是监听其父容器（如 <fieldset>）或同级 <label>，或者用 change 事件替代 click。后者更可靠，因为单选组切换必然触发 change，且只在真正选中变化后触发一次。
- 优先用
addEventListener('change', ...)监听input[type="radio"] - 若需点击即响（包括取消再点同一项），才考虑监听
label或父容器的click - 避免给每个 radio 单独绑事件，用事件委托更轻量：
document.querySelector('.radio-group').addEventListener('change', handleRadioChange)
Audio 播放被阻止？绕过自动播放策略
现代浏览器禁止未用户交互触发的音频播放（比如页面加载后直接 audio.play()），但单选按钮的 change 是明确的用户操作，理论上允许。实际中仍可能失败，常见原因：
-
Audio实例未在用户手势（如 click/change）回调内创建或调用play() - 音频文件路径错误或跨域导致
load失败，后续play()抛DOMException: The element has no supported sources - 重复快速点击导致多个
play()调用，部分浏览器会静音后续请求
推荐写法：
const audio = new Audio('/sound/click.mp3');
function handleRadioChange(e) {
// 确保每次都在事件回调里调用 play()
audio.currentTime = 0; // 重置位置，避免卡在末尾
audio.play().catch(e => console.warn('Audio play failed:', e));
}
多个单选按钮共用一个音效？注意 audio 实例复用
不要每次 change 都 new Audio(...)，容易内存泄漏且触发浏览器资源限制。一个 Audio 实例可反复调用 play()，只要提前加载好即可。
立即学习“前端免费学习笔记（深入）”；
- 在页面初始化时创建并预加载：
audio.load()或直接调用play()+pause()触发加载（无需用户交互） - 使用
audio.currentTime = 0保证每次从头播放 - 如果需要不同音效（如不同选项对应不同提示音），可按
e.target.value查表映射到不同Audio实例，但总数建议 ≤3 个，避免资源堆积
移动端点击无反应？补充 touch 兼容与延迟
iOS Safari 和部分安卓 WebView 对 change 事件响应有轻微延迟，或在快速连续操作时丢失事件。可加一层兜底：
- 同时监听
click和change，但用标志位防重复播放：let isPlaying = false; if (!isPlaying) { isPlaying = true; audio.play(); setTimeout(() => isPlaying = false, 200); } - 确保
<input>有足够点击热区：用<label>包裹，或设置min-height/padding避免 iOS 默认小尺寸点击失效 - 避免在
change回调里做耗时操作（如 DOM 批量更新），否则可能阻塞音频解码线程
Audio 对象的 preload 属性设为 'auto' 也没用，实际加载时机仍取决于首次 play() 调用。 
