我正在使用HTML5和JavaScript制作游戏。

如何通过JavaScript播放游戏音频?


当前回答

这是一个相当老的问题,但我想补充一些有用的信息。话题发起者提到他正在“制作一款游戏”。所以对于所有需要音频进行游戏开发的人来说,有比<audio>标签或HTMLAudioElement更好的选择。我认为你应该考虑使用Web Audio API:

虽然网页上的音频不再需要插件,但音频标签为实现复杂的游戏和交互式应用程序带来了巨大的限制。Web Audio API是一个高级JavaScript API,用于在Web应用程序中处理和合成音频。此API的目标是包含现代游戏音频引擎中的功能,以及现代桌面音频制作应用程序中的一些混合、处理和过滤任务。

其他回答

我用这个方法播放了一个声音…

var audioElement;
if(!audioElement) {
  audioElement = document.createElement('audio');
  audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();

你可以使用Web Audio API来播放声音。有相当多的音频库,如嚎叫.js, soundjs等。如果你不担心旧的浏览器,那么你也可以查看http://musquitojs.com/。它提供了一个简单的API来创建和播放声音。

例如,要播放一个声音,你所要做的就是。

import $buzz from 'musquito';

const buzz = $buzz('gunfire.mp3');

buzz.play();

该库还支持音频精灵。

如果你得到以下错误:

DOMException: play()失败,因为用户 没有首先与文档交互。

这意味着用户需要首先与网站进行交互(正如错误消息所说)。在这种情况下,您需要使用点击或只是另一个事件监听器,以便用户可以与您的网站进行交互。

如果你想自动加载音频,并且不希望用户首先与文档交互,你可以使用setTimeout。

setTimeout(() => { document.getElementById('mySound').play(); }, 500) <audio id=“mySound” src=“sound.mp3”></audio>

声音将在0.5秒后开始。

在react中,你可以使用ref:

// typescript
const audRef = useRef(null);
const playAudio = () => {
  (audRef.current as any).play();
}
...
// html
<audio controls src={your_audio} ref={audRef} />
<button onClick={playAudio}>Play</button>

这是一个相当老的问题,但我想补充一些有用的信息。话题发起者提到他正在“制作一款游戏”。所以对于所有需要音频进行游戏开发的人来说,有比<audio>标签或HTMLAudioElement更好的选择。我认为你应该考虑使用Web Audio API:

虽然网页上的音频不再需要插件,但音频标签为实现复杂的游戏和交互式应用程序带来了巨大的限制。Web Audio API是一个高级JavaScript API,用于在Web应用程序中处理和合成音频。此API的目标是包含现代游戏音频引擎中的功能,以及现代桌面音频制作应用程序中的一些混合、处理和过滤任务。