我正在使用 HTML5 和 JavaScript 制作游戏。
如何通过 JavaScript 播放游戏音频？
【问题讨论】：
<audio>。该元素将具有适当的 JS 钩子，用于“播放”、“暂停”等......
标签： javascript html html5-audio
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 提供了一个易于使用的 API，允许在任何现代浏览器（包括 IE 6+）中播放声音。如果浏览器不支持 HTML5，那么它会从 flash 中获得帮助。如果你想要严格的 HTML5 而没有 Flash，有一个设置，preferFlash=false
它在 iPad、iPhone (iOS4) 和其他支持 HTML5 的设备 + 浏览器上支持 100% 无 Flash 音频
使用很简单：
<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';
soundManager.onready(function() {
soundManager.createSound({
id: 'mySound',
url: '/path/to/an.mp3'
});
// ...and play it
soundManager.play('mySound');
});
</script>
这是一个实际的演示：http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
【讨论】：
很简单，只需获取您的audio 元素并调用play() 方法：
document.getElementById('yourAudioTag').play();
看看这个例子：http://www.storiesinflight.com/html5/audio.html
This site 揭示了您可以做的其他一些很酷的事情，例如load()、pause()，以及audio 元素的一些其他属性。
【讨论】：
onload激活的函数中使用，见this。但是，使用onclick 对我来说效果很好。用户首先需要与页面交互才能播放声音（这是常规、预期和用户友好的行为）。
如果你不想弄乱 HTML 元素：
var audio = new Audio('audio_file.mp3');
audio.play();
function play() {
var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');
audio.play();
}<button onclick="play()">Play Audio</button>这使用HTMLAudioElement接口，播放音频的方式与<audio> element相同。
如果您需要更多功能，我使用了howler.js 库，发现它简单实用。
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
var sound = new Howl({
src: ['https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'],
volume: 0.5,
onend: function () {
alert('Finished!');
}
});
sound.play()
</script>【讨论】：
<audio> 相同的格式。维基百科有一个audio format compatibility table。 new Audio() 可以在除 Internet Explorer 之外的所有浏览器中播放 WAV 文件。
这是一个很老的问题，但我想添加一些有用的信息。话题发起者提到他是"making a game"。因此，对于需要音频进行游戏开发的每个人来说，除了<audio> 标签或HTMLAudioElement，还有更好的选择。我认为你应该考虑使用Web Audio API：
虽然网络上的音频不再需要插件，但音频标签为实现复杂的游戏和交互式应用程序带来了重大限制。 Web Audio API 是一个高级 JavaScript API，用于在 Web 应用程序中处理和合成音频。此 API 的目标是包含现代游戏音频引擎中的功能以及现代桌面音频制作应用程序中的一些混合、处理和过滤任务。
【讨论】：
使用 Jquery 很容易
// 设置无预加载的音频标签
<audio class="my_audio" controls preload="none">
<source src="audio/my_song.mp3" type="audio/mpeg">
<source src="audio/my_song.ogg" type="audio/ogg">
</audio>
//添加jquery加载
$(".my_audio").trigger('load');
//编写播放和停止的方法
function play_audio(task) {
if(task == 'play'){
$(".my_audio").trigger('play');
}
if(task == 'stop'){
$(".my_audio").trigger('pause');
$(".my_audio").prop("currentTime",0);
}
}
//决定如何控制音频
<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>
编辑
为了解决@stomy 的问题，您可以使用这种方法播放播放列表：
将您的歌曲设置在一个对象中：
playlist = {
'song_1' : 'audio/splat.mp3',
'song_2' : 'audio/saw.mp3',
'song_3' : 'audio/marbles.mp3',
'song_4' : 'audio/seagulls.mp3',
'song_5' : 'audio/plane.mp3'
}
像以前一样使用触发和播放功能：
$(".my_audio").trigger('load');
function play_audio(task) {
if(task == 'play'){
$(".my_audio").trigger('play');
}
if(task == 'stop'){
$(".my_audio").trigger('pause');
$(".my_audio").prop("currentTime",0);
}
}
动态加载第一首歌曲：
keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");
当当前歌曲结束时，将音频源重置为播放列表中的下一首歌曲：
count = 0;
$('.my_audio').on('ended', function() {
count++;
$("#sound_src").attr("src", playlist[keys[count]])[0];
$(".my_audio").trigger('load');
play_audio('play');
});
请参阅here，了解此代码的实际操作示例。
【讨论】：
ended 事件并开始列表中的下一个音频文件（大概你在 DOM、JS 中跟踪内存等）。 developer.mozilla.org/en-US/docs/Web/Events/ended
我用这个方法播放声音...
var audioElement;
if(!audioElement) {
audioElement = document.createElement('audio');
audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();
【讨论】：
添加隐藏音频并播放。
function playSound(url){
var audio = document.createElement('audio');
audio.style.display = "none";
audio.src = url;
audio.autoplay = true;
audio.onended = function(){
audio.remove() //Remove when played.
};
document.body.appendChild(audio);
}
【讨论】：
如果您想在页面打开时播放音频，请这样做。
<script>
function playMusic(){
music.play();
}
</script>
<html>
<audio id="music" loop src="sounds/music.wav" autoplay> </audio>
</html>并在需要时在游戏代码中调用此 playMusic()。
【讨论】：
如果您有如下 HTML 标记，则非常简单的解决方案：
<audio id="myAudio" src="some_audio.mp3"></audio>
只要用 JavaScript 播放就行了，像这样：
document.getElementById('myAudio').play();
【讨论】：
new Audio('./file.mp3').play()
【讨论】：
var song = new Audio();
song.src = 'file.mp3';
song.play();
【讨论】：
您可以使用 Web Audio API 来播放声音。那里有很多音频库，例如 howler.js、soundjs 等。如果您不担心旧浏览器，那么您也可以查看 http://musquitojs.com/。它提供了一个简单的 API 来创建和播放声音。
例如，要播放声音，您所要做的就是。
import $buzz from 'musquito';
const buzz = $buzz('gunfire.mp3');
buzz.play();
该库还支持音频精灵。
【讨论】：
如果您收到以下错误：
Uncaught (in promise) DOMException: play() failed 因为用户 没有先与文档进行交互。
这意味着用户需要首先与网站进行交互（如错误消息所述）。在这种情况下，您需要使用click 或只是另一个事件侦听器，以便用户可以与您的网站进行交互。
如果您想自动加载音频并且不希望用户首先与文档进行交互，您可以使用setTimeout。
setTimeout(() => {
document.getElementById('mySound').play();
}, 500)<audio id="mySound" src="sound.mp3"></audio>声音会在 0.5 秒后开始。
【讨论】：
我遇到了一些与 audio promise object 返回相关的问题，以及一些与用户与声音交互相关的问题，我最终使用了这个小对象，
我建议实现最接近用户正在使用的交互事件的播放声音。
var soundPlayer = {
audio: null,
muted: false,
playing: false,
_ppromis: null,
puse: function () {
this.audio.pause();
},
play: function (file) {
if (this.muted) {
return false;
}
if (!this.audio && this.playing === false) {
this.audio = new Audio(file);
this._ppromis = this.audio.play();
this.playing = true;
if (this._ppromis !== undefined) {
this._ppromis.then(function () {
soundPlayer.playing = false;
});
}
} else if (!this.playing) {
this.playing = true;
this.audio.src = file;
this._ppromis = soundPlayer.audio.play();
this._ppromis.then(function () {
soundPlayer.playing = false;
});
}
}
};
并按如下方式实现：
<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>
【讨论】：
这是我在一个正在使用的婴儿 AI 项目中提出的一些 JS。我希望这能够帮助你。
<!DOCTYPE html>
<html>
<head>
<title>
js prompt AI
</title>
<style>
#button {
border: 1px solid black;
border-radius: 10px;
font-size: 22px;
height:65px;
width:100px;
text-align: center;
line-height: 65px;
}
</style>
</head>
<body>
<audio id="myAudio" src="./how_are_you.m4a"></audio>
<p>To Interact with the AI please click the button</p>
<div id=button>click</div>
<script>
var button = document.getElementById("button");
function playBack() {
button.addEventListener("click", function (){
var talk = prompt("If you wish for the AI to respond type hi");
var myAudio = document.getElementById("myAudio");
if(talk === "hi") {
myAudio.play();
}
}) ;
}
playBack();
</script>
</body>
</html>
【讨论】：
就用这个吧：
<video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>
或者，为了更简单：
<video controls="" autoplay="" name="media">
<source src="Sound URL Here" type="audio/mpeg" />
</video>
示例：
<video controls="" autoplay="" name="media">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
</video>不知道这是否适用于 Chrome 73 以外的其他浏览器！！
【讨论】：
我在播放音频时遇到了一些问题，尤其是在 Chrome 更新后，用户必须先与文档进行交互。
然而，在我发现的几乎所有解决方案中，JS 代码必须主动设置侦听器（例如按钮点击）来接收用户事件才能播放音频。
在我的例子中，我只是希望我的游戏在玩家与之交互时立即播放 BGM，所以我让自己成为一个简单的监听器，不断检查网页是否正在交互。
const stopAttempt = setInterval(() => {
const audio = new Audio('your_audio_url_or_file_name.mp3');
const playPromise = audio.play();
if (playPromise) {
playPromise.then(() => {
clearInterval(stopAttempt)
}).catch(e=>{
console.log('' + e);
})
}
}, 100 )
【讨论】：
当您看到错误时，这是 2020 年的解决方案：
[错误] 未处理的承诺拒绝：NotSupportedError：不支持该操作。 （匿名函数） 拒绝承诺 玩 （匿名函数）（testaudio.html:96） 调度 (jquery-3.4.1.min.js:2:42577)
<div onclick="new Audio('/assets/test.mp3').play()">aaa</div>
不要狡猾地认为哦，这是一个老派oclick，我将把它从页面移到我的 jQuery 或我的外部 JavaScript 文件中。没有。它必须是onclick。
【讨论】：
根据安全要求，用户必须与网页交互才能允许音频，这就是我的做法，基于阅读了许多文章，包括本网站上的文章
由于所有音频文件都在同一个 OnClick 上“播放”过，您现在可以在游戏中的任何时间播放它们而不受限制
请注意，为了获得最佳兼容性，请勿使用 wav 文件，MS 不支持它们
使用 mp3 和 ogg，涵盖所有设备
例子：
<audio id="welcome">
<source src="URL/welcome.ogg" type="audio/ogg">
<source src="URL/welcome.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
根据需要重复游戏中的所有音频
然后：
document.getElementById("welcome").play();
document.getElementById("welcome").pause();
根据需要重复，但不要在游戏开始时暂停您想听到的音频
【讨论】：
如果您希望即使当前未选择浏览器选项卡也能播放声音，您必须在页面加载时加载音频资源。
像这样：
var audio = new Audio('audio/path.mp3');
function playSound(){
audio.play();
}
更多详情请参阅this问题
【讨论】：
在反应中，你可以使用 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>
【讨论】：