我正在使用HTML5和JavaScript制作游戏。
我该如何通过JavaScript播放游戏音频？
22个回答
1914
如果您不想处理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> 元素 相同的方式播放音频。
如果您需要更多功能，我使用了 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>- Uri
24
14这种方法适用于播放mp3文件，但不适用于wav文件。有没有什么方法可以播放wav文件？ - guagay_wk
19这种方法支持与HTML5中的
<audio>标签相同的格式。维基百科有一个音频格式兼容表格。 在除了Internet Explorer之外的所有浏览器中，new Audio()可以播放WAV文件。 - Rory O'Kane433所以除了微软之外，每个人都可以播放微软的音频格式？哈哈。 - Dave Cousineau
显示剩余19条评论
218
很简单，只需获取您的audio元素并调用play()方法：
document.getElementById('yourAudioTag').play();
看看这个例子：http://www.storiesinflight.com/html5/audio.html
这个网站 揭示了一些其他很酷的事情，例如load()，pause()和audio元素的一些其他属性。
- shanabus
3
这也适用于iOS，无需UI交互（使用带有autoplay和muted的音频标签），然后设置muted为false并调用play。 - luky
2以前很容易，但现在不是了 ;) - Reza
57
虽然这是一个相当旧的问题，但我想添加一些有用的信息。话题发起人提到他正在“制作游戏”。因此，对于所有需要进行游戏开发的音频的人来说，有一个比仅使用<audio>标签或HTMLAudioElement更好的选择。我认为你应该考虑使用Web Audio API：
虽然网络上的音频不再需要插件，但音频标签在实现复杂的游戏和交互式应用程序方面存在显着的限制。Web Audio API是用于在Web应用程序中处理和合成音频的高级JavaScript API。该API的目标是包括现代游戏音频引擎中发现的功能以及现代桌面音频生产应用程序中发现的一些混合、处理和过滤任务。
- Konstantin Smolyanin
1
1这应该是这里的最佳答案。特别是对于游戏开发而言。那里的示例非常容易跟随。 - birgersp
39
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/
- LordZardeck
2
我在macOS上尝试了Safari和Chrome（最新版本，2022年），但是没有声音。 - endavid
4这是一个10年前的回答，我不再建议使用它。请使用Uri在上面接受的答案：https://dev59.com/Rmox5IYBdhLWcg3wIQ1o#18628124 - LordZardeck
25
使用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');
});
请查看此处，以了解此代码的实际应用示例。
- Cybernetic
3
这会同时播放所有 class = "my_audio" 的音频标签。如何按照播放列表一个接一个地播放？ - stomy
@stomy，你在StackOverflow上发布了这个问题吗？如果是，请告诉我。我可以帮你解决。否则，我可以提供以下建议 - 在开始播放歌曲后，你可以监听“ended”事件的触发，并开始播放列表中的下一个音频文件（假设你已经在DOM、JS内存等地方进行了跟踪）。https://developer.mozilla.org/en-US/docs/Web/Events/ended - Sgnl
@stomy请检查我的答案中的编辑，以创建一个连续播放歌曲的播放列表。 - Cybernetic
22
如果你遇到以下错误：
如果您想自动加载音频并且不希望用户先与文档进行交互，则可以使用
声音将在0.5秒后开始。
这意味着用户需要先与网站进行交互（正如错误信息所述）。在这种情况下，您需要使用Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
click 或其他事件监听器，以便用户可以与您的网站进行交互。如果您想自动加载音频并且不希望用户先与文档进行交互，则可以使用
setTimeout。
setTimeout(() => {
document.getElementById('mySound').play();
}, 500)<audio id="mySound" src="sound.mp3"></audio>- Reza Saadati
1
这个不起作用，2018年也没起作用。 - Brad
22
添加一个隐藏的<audio>元素，并按照所示进行播放。
function playSound(url) {
var ourAudio = document.createElement('audio'); // Create a audio element using the DOM
ourAudio.style.display = "none"; // Hide the audio element
ourAudio.src = url; // Set resource to our URL
ourAudio.autoplay = true; // Automatically play sound
ourAudio.onended = function() {
this.remove(); // Remove when played.
};
document.body.appendChild(ourAudio);
}
- Rey
2
display:none是什么意思？即使没有它，我在页面上也看不到任何东西。 - Michael
没有必要将元素添加到页面中。只需使用
new Audio()即可。 - Brad11
new Audio('./file.mp3').play()
- Maxmaxmaximus
9
用户必须与网页进行交互以允许音频播放，根据阅读多篇文章（包括本站文章），这是我实现的方法：
- 在html中定义所需的音频文件
- 创建一个带有“onclick”属性的“开始游戏”按钮
- 当单击按钮时，播放和暂停除了要在开头播放的音频之外的所有音频文件
因为所有音频文件都已经在同一个“OnClick”事件中“播放”，所以您现在可以在游戏中任何时间播放它们而不受限制
请注意，为了获得最佳兼容性，请勿使用wav文件，因为微软不支持它们
使用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();
需要时重复执行，但在游戏开始时不要暂停您想听的音频。
- Phil Allen
8
如果您有以下HTML标签，那么这是一个非常简单的解决方案：
```html
只需使用JavaScript来播放它，方法如下：
像下面这样：
```<audio id="myAudio" src="some_audio.mp3"></audio>
只需使用JavaScript来播放它，方法如下：
document.getElementById('myAudio').play();
- Ben Stafford
3
你是不是想使用 </a> 或者 </audio>？只是好奇。 - Cooper
我使用了<audio>标签。 - Ben Stafford
1Ben，你的示例有一个错误的闭合标签，这就是为什么@Cooper会问那个问题。我已经编辑了答案并加上了正确的闭合标签。 - Sgnl
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<audio>元素。该元素将具有适当的JS钩子，用于'play'，'pause'等操作... - Marc B