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

分两部分：

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格式，而不是优先选择。音乐好像只能播放一遍，没有循环（待解决）。