HTML5游戏加声音核心是Audio对象或Web Audio API；轻量级游戏优先用Audio，注意异步加载、用户手势触发、实例复用、格式选择、循环避坑、音量适配及跨平台兼容性测试。
HTML5 游戏里加声音，核心就两件事：用 Audio 对象加载播放，或用 Web Audio API 做精细控制；绝大多数轻量级游戏直接用 Audio 就够了，别一上来就啃 Web Audio。
怎么用 Audio 播放一个音效
最简方式是创建 Audio 实例并调用 play()：
const sfx = new Audio('click.mp3');
sfx.play();
但实际写的时候要注意这些：
-
Audio加载是异步的，play()可能失败（比如浏览器没授权自动播放），得监听canplay或loadeddata事件再播 - 移动端 iOS Safari 要求首次播放必须由用户手势（如
click、touchstart）触发，不能在页面加载完立刻播 - 重复播放同一音效时，建议每次新建
Audio实例，否则可能卡在paused === true状态；也可以手动sfx.currentTime = 0重置 - MP3 兼容性最好，但体积大；可选
.ogg或.wav（短音效用wav解码快，无压缩延迟）
背景音乐循环播放的坑怎么避
背景音乐通常要 loop = true，但光设这个不够：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
audio.loop = true，HTML 属性loop在 JS 创建的实例中不生效 - 有些浏览器（尤其旧版 Android）在
loop模式下会插入毫秒级空白，导致“咔哒”声；解决办法是用两个Audio实例交替播放，或换用 Web Audio 的BufferSourceNode循环 - 音量控制别用
audio.volume = 0.7粗暴设——用户可能开了系统静音，更稳妥的是监听volumechange并结合本地存储记住上次音量值
为什么音效一卡顿就播不出来
常见于频繁点击触发音效（比如格斗游戏连击）：
- 浏览器对同一
Audio实例的并发播放有限制（一般 1–4 个），超出就静音或报错DOMException: The element has no supported sources - 解决方案不是“多建几个变量”，而是做简单池化：预创建 3–5 个
Audio实例放进数组，每次play()前找一个ended或paused的复用 - 避免在
requestAnimationFrame里高频调用play()，哪怕加了防抖，也要检查audio.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA
音频最难的不是播放，是时机精准和跨平台行为一致；iOS 和 Chrome on Android 的自动播放策略、解码延迟、暂停恢复逻辑全都不一样，真要保体验，得在真实设备上逐个测，不能只信桌面 Chrome 控制台输出。
