我是HullQin，公众号线下团聚游戏的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者HullQin受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
问题形容
要做小游戏，播放音效、BGM是必须的。如何实现呢？
首先咱们辨别2个概念：背景音乐（Background Music简称BGM）和音效（Sound Effect简称SE）。
背景音乐是须要循环播放的，是很长的音乐，可能中途有暂停、切歌的诉求。同一时间个别只有1首BGM在播放。
音效是在须要时单次播放，比拟短的声音，个别随着动画、用户操作一起触发。同一时间可能叠加很多个SE。播放完，就完结了。
所以，二者诉求不同，咱们最好别离实现。
前提常识
浏览器如何播放声音
目前，前端能够通过audio这个标签，来播放声音，介绍几个重要的属性：
src：声音资源的URL。type：声音资源的类型，会用该形式解码。例如.mp3应该用audio/mpeg，而.ogg则用audio/ogg，而.wav是audio/wav。loop：是否循环播放，若有该属性（不须要赋值），则示意循环播放。否则播放一次后就完结了。
此外，audio对应的element还有属性是volume，能够通过JS设置和批改，0示意没声音，1示意100%，即音乐实在音量。
浏览器播放声音的限度
浏览器有个限度：只有用户跟网页产生了交互（按键盘、鼠标都算交互），才容许播放声音。所以当你关上视频网站时、或者关上某个直播间时，网页上往往会提醒「点此勾销静音」，其实是网页开发者对该限度做的斗争，也是相干协定制定者冀望的体现。
如果你在用户产生交互前，调用APIaudio.play()播放了音乐，会有报错：
Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. https://goo.gl/xX8pDD
播放BGM
定义audio标签
因为全局同时只有1个BGM在播放，咱们能够在html文件中定义这个BGM的audio标签：
<audio id="bgm" loop src="你的音乐的地址" type="音乐类型"></audio>之后能够获取这个dom节点：
const bgmEl = document.getElementById('bgm');当然，你也能够用JS生成这个html：
const bgmEl = document.createElement('audio');
bgmEl.setAttribute('loop', '');
bgmEl.setAttribute('type', '音乐类型');
bgmEl.setAttribute('src', '你的音乐的地址');
document.body.appendChild(bgmEl);设置开始播放的机会
let bgmStarted = false;
const startPlayBGM = () => {
if (bgmStarted) return;
bgmStarted = true;
bgmEl.play();
document.body.removeEventListener('click', startPlayBGM);
window.removeEventListener('keydown', startPlayBGM);
};
document.body.addEventListener('click', startPlayBGM);
window.addEventListener('keydown', startPlayBGM);能够看到，咱们监听了鼠标事件和键盘事件，只有用户产生了交互，就能够开始播放了～
实现切换BGM
我在《咱们用48h，单干发明了一款Web游戏：Dice Crush，加入国内赛事》游戏中，做了这种成果：
用户被动切换游戏速度时（Slow、Normal、Fast），BGM也会随着切换。是点击时立马切换的。此外，为了防止每次切换后，BGM都从头开始，让玩家听腻。所以我间接设置了3个audio标签，每个audio标签各自循环播放1首BGM（一共3首）。那么切换BGM函数只须要做这件事：设置其它2个audio音量=0，要播放的BGM的audio音量=1。这就保障了每次切换，都是对应歌曲的不同播放地位，让玩家没有厌烦感。
let current = 0;
const changeBGM = (num) => {
if (!startPlayBGM) {
current = num;
return;
}
// 注：audios是3个audio结点组成的数组。
audios.forEach((audio, index) => {
if (num === index) {
audio.volume = 1;
audio.play(); // 可有可无。依据你心愿达成的成果，可删掉或留着。
} else {
audio.volume = 0;
}
});
};changeBGM函数有个小细节：如果以后还没产生交互，那么会把以后的音乐编号存到current变量。当然startPlayBGM函数也有一些变动：初始化时，所有audio的volume都是0，用户产生交互后，把current对应的BGM的volume设置为1，并且调用它的audio.play()。你思考下，为什么这么实现？
因为可能有时候changeBGM调用时，还没产生交互。须要把以后的BGM存下来。而后产生交互时，播放current即可。
播放音效
定义音效常量
因为音效很多，文件比拟多，倡议用一个配置文件，定义我的项目中所有的音效：
例如：
const SE = {
Drop: {
path: 'audio/se/Shot1.ogg',
type: 'audio/ogg',
duration: 1500,
volume: 0.75,
},
Roll: {
path: 'audio/se/roll.wav',
type: 'audio/wav',
duration: 1500,
volume: 0.75,
},
Crush: {
path: 'audio/se/crush.wav',
type: 'audio/wav',
duration: 1500,
volume: 0.75,
},
Lose: {
path: 'audio/se/lose.mp3',
type: 'audio/mpeg',
duration: 5500,
volume: 1,
},
};其中SE对象的key是音效的名字，值中path会赋值给src。duration示意这个SE的时长（毫秒），倡议大于等于音效的时长，但不要太大。
定义播放音效的容器
因为音效可能会并发，咱们提前定义16个audio标签，最多可反对16个音效同时播放。而这些audio是容许反复利用的。
const seList = [];
for (let i = 0; i < 16; i++) {
const audioElement = document.createElement('audio');
document.body.appendChild(audioElement);
seList.push({
dom: audioElement,
finishTime: 0,
});
}当某个SE播放开始过了duration毫秒后，表明这个audio工作实现了，处于「闲置」状态了。
这种逻辑你会怎么实现呢？应用16个setTimeout吗？
不要频繁应用setTimeout，咱们齐全能够通过finishTime记录它的播放实现工夫。每次播放时，计算是否闲暇即可。
此外，有些动作类游戏，可能会密集的播放音效，如果太密集，咱们16个并发的audio也无奈支撑住了，所以最好加个「防抖」，将80ms内反复播放的音效合并，然而如果合并了，咱们给音效音量加大。合并的越多，音效越嘹亮。
const broadcastSe = (se) => {
// 获取以后工夫
const now = new Date().getTime();
// 判断是否须要防抖解决（同一个类型的音效、且播放时间差小于80ms）
const sameItem = seList.find((item) => item.dom.getAttribute('src') === se.path && Math.abs(item.finishTime - now - se.duration) < 80);
// 雷同音效，就把音量加大，最大值为1，并完结函数。
if (sameItem) {
sameItem.dom.volume = Math.min(sameItem.dom.volume + 0.1, 1);
return;
}
// 不同音效，寻找闲暇的audio，要求dom的finishTime小于当初工夫戳，阐明它是闲暇的
const potentialDom = seList.find((item) => item.finishTime < now);
if (potentialDom) {
potentialDom.dom.setAttribute('src', se.path);
potentialDom.dom.setAttribute('type', se.type);
potentialDom.dom.volume = se.volume;
potentialDom.finishTime = now + se.duration;
// 这里要等src设置结束后，加载好音效后再播放。所以注册了一个提早执行的工作。否则，会播放旧的src资源
setTimeout(() => potentialDom.dom.play(), 0);
} else {
console.log('资源有余，无奈播放', se.path);
}
};播放多个SE时，成果如下：
写在最初
我是HullQin，公众号线下团聚游戏的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者HullQin受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
发表回复