在HTML5游戏开发中，声音是提升沉浸感的重要元素。无论是打击音效还是背景音乐，都可以通过引擎自带的音频功能来实现。下面介绍几种常见方式以及具体用法。
一、准备音频资源
首先需要将声音文件放在项目目录中，常用格式有mp3、ogg和wav。为了兼容不同浏览器，建议同时准备mp3和ogg两种格式。在代码中通过路径引用即可。
二、使用Audio标签方式
最简单的方法是创建Audio对象来播放声音，适合对性能要求不高的小游戏。
// 创建音频对象
var sound = new Audio();
sound.src = 'assets/hit.mp3';
// 播放音效
function playHit() {
sound.currentTime = 0;
sound.play();
}
三、使用WebAudio接口
如果希望更精确地控制音量、声相和混音，可以使用WebAudio。下面展示如何用AudioContext加载并播放一个缓冲区音频。
// 初始化音频上下文
var ctx = new (window.AudioContext || window.webkitAudioContext)();
var buffer = null;
// 加载音频文件
function loadSound(url, callback) {
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.responseType = 'arraybuffer';
req.onload = function() {
ctx.decodeAudioData(req.response, function(decoded) {
buffer = decoded;
callback();
});
};
req.send();
}
// 播放声音
function playSound() {
var source = ctx.createBufferSource();
source.buffer = buffer;
source.connect(ctx.destination);
source.start(0);
}
loadSound('assets/bgm.ogg', function() {
console.log('音频加载完成');
});
四、处理自动播放限制
现代浏览器禁止页面在无用户交互时自动播放声音。解决办法是在第一次点击或触摸事件中恢复AudioContext状态。
document.addEventListener('click', function initAudio() {
if (ctx.state === 'suspended') {
ctx.resume();
}
document.removeEventListener('click', initAudio);
});
五、常用控制方法对比
| 方式 | 优点 | 缺点 |
|---|---|---|
| Audio标签 | 使用简单，代码少 | 控制能力弱，多音效性能差 |
| WebAudio | 低延迟，可混合处理 | 接口复杂，需手动管理 |
六、小结
在HTML5引擎里添加声音并不复杂，关键是根据游戏规模选择Audio标签或WebAudio，并注意浏览器的播放策略。合理运用能让游戏表现更完整。