最轻量兼容的方式是用new Audio()在用户点击事件中直接播放；必须由click/touchstart等手势同步触发play()，禁用异步延迟；推荐复用Audio实例并重置currentTime=0，避免高频创建导致卡顿或失败。
怎么用 Audio 对象在转盘点击/转动时播放音效
直接用 new Audio() 加载并调用 play() 是最轻量、兼容性最好的方式，不需要额外 DOM 元素或依赖。但要注意浏览器策略：必须由用户手势（如 click、touchstart）触发，不能在页面加载后自动播放。
常见错误是把 play() 放在定时器、动画回调或异步逻辑里，结果静音或报错 DOMException: play() failed because the user didn't interact with the document。
- 音效文件建议用
.mp3或.ogg，体积小、解码快；避免用.wav（体积大，部分安卓机型解码卡顿） - 推荐在按钮点击事件中初始化并播放，例如：
document.getElementById('spin-btn').addEventListener('click', () => { const sound = new Audio('/sounds/spin.mp3'); sound.play().catch(e => console.warn('音效播放被阻止:', e)); }); - 如果需多次播放同一音效，不要复用同一个
Audio实例（否则可能因未就绪而失败），每次新建更稳妥
为什么 <audio></audio> 标签 + play() 调用经常失败
用 <audio src="xxx.mp3" id="spin-sound"></audio> 然后 JS 里 document.getElementById('spin-sound').play() 看似合理，但实际容易出问题——核心在于音频元素的加载状态和播放时机不匹配。
-
play()必须在元素已加载元数据（loadedmetadata）之后调用，否则 Chrome 会拒绝并抛错 - 移动端 Safari 对
preload属性敏感：preload="auto"可能被忽略，preload="metadata"更可靠 - 如果音频路径错误或服务器未正确返回
Content-Type: audio/mpeg，networkState会是0（NETWORK_EMPTY），play()必然失败 - 调试时可加检查：
const audio = document.getElementById('spin-sound'); console.log('readyState:', audio.readyState, 'networkState:', audio.networkState); audio.play().catch(e => console.error(e));
转盘停止时播放“中奖音效”的时机怎么卡准
关键不是“等转盘 DOM 动画结束”，而是监听转盘逻辑完成的那一刻——比如 CSS transitionend 不可靠（受 easing 影响，结束时间不精确），应以 JavaScript 控制的旋转角度计算为准。
立即学习“前端免费学习笔记（深入）”；
- 在你控制转盘旋转的函数里，当目标角度到达、CSS
transform设置完毕后，立刻触发音效，例如：function stopAt(angle) { wheel.style.transition = 'transform 4s cubic-bezier(0.25, 0.1, 0.25, 1)'; wheel.style.transform = `rotate(${angle}deg)`; // 4s 后播放中奖音 setTimeout(() => { const winSound = new Audio('/sounds/win.mp3'); winSound.play(); }, 4000); } - 更健壮的做法是用
requestAnimationFrame或 Promise 包装 CSS 过渡完成检测，但对音效场景，误差 ±200ms 用户基本无感，直接setTimeout更简单 - 注意：别在
transitionend里播，因为转盘常带多段 easing（先快后慢），transitionend触发时间可能比视觉停稳早 300ms+，导致音效“抢拍”
多个音效同时播放导致卡顿或覆盖怎么办
浏览器对同一域名下的音频并发数有限制（通常 4–6 个），且频繁创建 Audio 实例可能触发 GC 延迟，尤其低端安卓机上容易出现音效延迟、跳过甚至无声。
- 对高频操作（如连续点击“再抽一次”），用一个预加载的
Audio实例 +currentTime = 0重置，比每次都new Audio()更稳：const spinSound = new Audio('/sounds/spin.mp3'); spinSound.preload = 'auto'; function playSpin() { spinSound.currentTime = 0; spinSound.play().catch(() => {}); } - 避免在转盘还在转时重复触发播放——加个
isSpinning标志位，点击前判断 - 如果必须同时播多个音效（如“转”+“停”+“中奖文字弹出”），优先保证关键音效（如中奖提示），次要音效可降级为静音或跳过
