给游戏添加背景音乐并控制播放

分两部分：

1.加载音乐文件

主要学习了加载页面的代码game.loader。

var loader = {
loaded: true,
loadedCount: 0, // Assets that have been loaded so far
totalCount: 0, // Total number of assets that need to be loaded

init: function() {
// check for sound support
var mp3Support, oggSupport;
var audio = document.createElement('audio');
if (audio.canPlayType) {
// Currently canPlayType() returns: "", "maybe" or "probably"
mp3Support = "" != audio.canPlayType('audio/mpeg');
oggSupport = "" != audio.canPlayType('audio/ogg; codecs="vorbis"');
} else {
//The audio tag is not supported
mp3Support = false;
oggSupport = false;
}

// Check for ogg, then mp3, and finally set soundFileExtn to undefined
loader.soundFileExtn = oggSupport ? ".ogg" : mp3Support ? ".mp3" : undefined;
},
loadImage: function(url) {
this.totalCount++;
this.loaded = false;
$('#loadingscreen').show();
var image = new Image();
image.src = url;
image.onload = loader.itemLoaded;
return image;
},
soundFileExtn: ".ogg",
loadSound: function(url) {
this.totalCount++;
this.loaded = false;
$('#loadingscreen').show();
var audio = new Audio();
audio.src = url + loader.soundFileExtn;
audio.addEventListener("canplaythrough", loader.itemLoaded, false);
return audio;
},
itemLoaded: function() {
loader.loadedCount++;
$('#loadingmessage').html('Loaded ' + loader.loadedCount + ' of ' + loader.totalCount);
if (loader.loadedCount === loader.totalCount) {
// Loader has loaded completely..
loader.loaded = true;
// Hide the loading screen
$('#loadingscreen').hide();
//and call the loader.onload method if it exists
if (loader.onload) {
loader.onload();
loader.onload = undefined;
}
}
}

2.播放代码及调用

分为播放、暂停、判断状态

var game = {
init: function() {
loader.init();
game.backgroundMusic=loader.loadSound('audio/backgroundMusic');//背景音乐加载

startBackgroundMusic:function(){
var music=$('#backgroundMusic')[0];
game.backgroundMusic.play();
music.style="background:rgba(255,255,255,0)";
},
stopBackgroundMusic:function(){
var music=$('#backgroundMusic')[0];
music.style="background:rgba(128,128,128,0.5)";
game.backgroundMusic.pause();
game.backgroundMusic.currentTime=0;//回到音乐开始的地方

},
musicBackgroundMusic:function(){
var music=$('#backgroundMusic')[0];
if (game.backgroundMusic.paused) {
game.backgroundMusic.play();//音乐play的地方，只要调用musicBackgroundMusic函数，背景音乐就会播放
music.style="background:rgba(255,255,255,0)";
}else{
game.backgroundMusic.pause();
$('#backgroundMusic')[0].style="background:rgba(128,128,128,0.5)";

}
}
}

3.同理，给其他事件绑定音乐，也是先定义音乐名称，加载完成后，根据什么时候调用播放等等。

4.注意事项：素材文件要每个都准备ogg格式和mp3格式。因为代码中只是判断浏览器支不支持ogg和mp3格式，而不是优先选择。音乐好像只能播放一遍，没有循环（待解决）。