[教你做小游戏] 只用几行原生JS，写一个函数，播放音效、播放BGM、切换BGM

本文链接：https://blog.csdn.net/kd_2015/article/details/126844866

本文介绍了如何使用原生JavaScript实现游戏中的音效和背景音乐播放，包括区分BGM和音效的概念，播放BGM的实现，如设置audio标签，监听用户交互以启动播放，以及切换BGM的策略。同时，文章还讲解了播放音效的方法，通过定义音效常量和播放容器，确保并发播放和防止过度密集播放导致的问题。

摘要由CSDN通过智能技术生成

我是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