我正在使用 HTML5 和 JavaScript 制作游戏。
如何通过 JavaScript 播放游戏音频?
我正在使用 HTML5 和 JavaScript 制作游戏。
如何通过 JavaScript 播放游戏音频?
如果您不想弄乱 HTML 元素:
var audio = new Audio('audio_file.mp3');
audio.play();
这使用了HTMLAudioElement
接口,它以与<audio>
element相同的方式播放音频。
如果您需要更多功能,我使用了howler.js库,发现它简单而有用。
这很简单,只需获取您的audio
元素并调用该play()
方法:
document.getElementById('yourAudioTag').play();
看看这个例子:http : //www.storiesinflight.com/html5/audio.html
本网站揭示的其他一些很酷的事情可以做,比如load()
,pause()
和几个其他属性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/
这是一个很老的问题,但我想添加一些有用的信息。话题发起人提到他是"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');
});
有关此代码的示例,请参见此处。