我正在使用HTML5和JavaScript制作游戏。
如何通过JavaScript播放游戏音频?
我正在使用HTML5和JavaScript制作游戏。
如何通过JavaScript播放游戏音频?
当前回答
这很简单,只需要获取音频元素并调用play()方法:
document.getElementById('yourAudioTag').play();
看看这个例子:http://www.storiesinflight.com/html5/audio.html
这个站点还提供了一些其他很酷的功能,比如load()、pause()和音频元素的其他一些属性。
其他回答
如果你想在当前浏览器选项卡未被选中的情况下也能播放声音,你必须在页面加载时加载音频资源。
像这样:
var audio = new Audio('audio/path.mp3');
function playSound(){
audio.play();
}
请参阅这个问题了解更多细节
如果你不想打乱HTML元素:
var audio = new Audio('audio_file.mp3');
audio.play();
功能播放(){ var audio = new audio ('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'); audio.play (); } <按钮onclick = "打()“>播放音频> < /按钮
这使用了HTMLAudioElement接口,它以与<audio>元素相同的方式播放音频。
如果你需要更多的功能,我使用了嚎叫.js库,发现它简单而有用。
< script src = " https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js " > < /脚本> < >脚本 var声音=新的嚎叫({ src(“https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3”):, 体积:0.5, Onend:函数(){ 警报(“完成了!”); } }); sound.play () > < /脚本
简单的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>
EDIT
为了解决@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');
});
请参见这里的实际代码示例。
我用这个方法播放了一个声音…
var audioElement;
if(!audioElement) {
audioElement = document.createElement('audio');
audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();
以下是2020年你看到错误时的解决方案:
[Error] Unhandled Promise Rejection: NotSupportedError:不支持该操作。 (匿名函数) rejectPromise 玩 (匿名函数)(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。