cocos2d-html5 各平台声音播放总结

cocos2d-js 采用官方的CocosDesion播放声音

声音资源一部分是mp3，一部分ogg

PC端，谷歌浏览器，播放声音一切正常，但到手机浏览器上声音就不能正常播放了

根据官方文档的音乐支持格式

平台	支持的常见文件格式	备注
Android	mp3, mid, oggg, wav	可以播放android.media.MediaPlayer所支持的所有格式
iOS	aac, caf, mp3, m4a, wav	可以播放AVAudioPlayer所支持的所有格式
Windows	mid, mp3, wav	无

CocosDesion支持的音效格式如下：

平台	支持的常见文件格式	备注
Android	oggg, wav	对wav的支持不完美
iOS	caf, m4a	可以播放Cocos2d-iPhone CocosDesion所支持的所有格式
Windows	mid, wav	无

主要原因是各平台格式不一样导致了不能播放

对比了一下音乐格式，主要采用ogg作为主要格式，其他格式作为扩展

 mp3 ：体积小，音质好

 ogg ：体积小，免费，音质好

 wav：无压缩、体积大

写了个测试程序

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    _userCursor:null,
    ctor:function () {
        this._super();
        var size = cc.winSize;

        this.musicDirectory = new Array();
        for(var i in music_res)
        {
            this.musicDirectory.push(music_res[i])
        }
        this.curMusicIndex = 0;
        this.soundDirectory = new Array();
        for(var i in sound_res)
        {
            this.soundDirectory.push(sound_res[i]);
        }
        this.curSoundIndex = 0;

        var curMusic = new cc.LabelTTF("当前播放音乐："+this.musicDirectory[this.curMusicIndex].substr(16), "微软雅黑", 20);
        curMusic.x = cc.winSize.width / 2;
        curMusic.y = cc.winSize.height / 2 + 150;
        this.addChild(curMusic);
        this.m_curMusicLabel = curMusic;

        var playMusic = new cc.LabelTTF("播放", "微软雅黑", 18);
        var playMusicItem = new cc.MenuItemLabel(playMusic, this.playMusicCallback, this);
        playMusicItem.x = cc.winSize.width / 2 - 90;
        playMusicItem.y = cc.winSize.height / 2 + 50;

        var stopMusic = new cc.LabelTTF("停止", "微软雅黑", 18);
        var stopMusicItem = new cc.MenuItemLabel(stopMusic, this.stopMusicCallback, this);
        stopMusicItem.x = cc.winSize.width / 2 - 30;
        stopMusicItem.y = cc.winSize.height / 2 + 50;

        var prevMusic = new cc.LabelTTF("上一首", "微软雅黑", 18);
        var prevMusicItem = new cc.MenuItemLabel(prevMusic, this.prevMusicCallback, this);
        prevMusicItem.x = cc.winSize.width / 2 + 30;
        prevMusicItem.y = cc.winSize.height / 2 + 50;

        var nextMusic = new cc.LabelTTF("下一首", "微软雅黑", 18);
        var nextMusicItem = new cc.MenuItemLabel(nextMusic, this.nextMusicCallback, this);
        nextMusicItem.x = cc.winSize.width / 2 + 90;
        nextMusicItem.y = cc.winSize.height / 2 + 50;

        var curSound = new cc.LabelTTF("当前播放音效："+this.soundDirectory[this.curSoundIndex].substr(22), "微软雅黑", 20);
        curSound.x = cc.winSize.width / 2;
        curSound.y = cc.winSize.height / 2 - 50;
        this.addChild(curSound);
        this.m_curSoundLabel = curSound;

        var playSound = new cc.LabelTTF("播放", "微软雅黑", 18);
        var playSoundItem = new cc.MenuItemLabel(playSound, this.playSoundCallback, this);
        playSoundItem.x = cc.winSize.width / 2 - 90;
        playSoundItem.y = cc.winSize.height / 2 - 150;

        var stopSound = new cc.LabelTTF("停止", "微软雅黑", 18);
        var stopSoundItem = new cc.MenuItemLabel(stopSound, this.stopSoundCallback, this);
        stopSoundItem.x = cc.winSize.width / 2 - 30;
        stopSoundItem.y = cc.winSize.height / 2 - 150;

        var prevSound = new cc.LabelTTF("上一首", "微软雅黑", 18);
        var prevSoundItem = new cc.MenuItemLabel(prevSound, this.prevSoundCallback, this);
        prevSoundItem.x = cc.winSize.width / 2 + 30;
        prevSoundItem.y = cc.winSize.height / 2 - 150;

        var nextSound = new cc.LabelTTF("下一首", "微软雅黑", 18);
        var nextSoundItem = new cc.MenuItemLabel(nextSound, this.nextSoundCallback, this);
        nextSoundItem.x = cc.winSize.width / 2 + 90;
        nextSoundItem.y = cc.winSize.height / 2 - 150;

        var menu = new cc.Menu(prevMusicItem, nextMusicItem, playMusicItem, stopMusicItem,
            prevSoundItem, nextSoundItem, playSoundItem, stopSoundItem);
        menu.x = 0;
        menu.y = 0;
        this.addChild(menu);

        return true;
    },
    prevMusicCallback:function(sender){
        if(this.curMusicIndex == 0)
        {
            this.curMusicIndex = this.musicDirectory.length-1;
        }
        else
        {
            this.curMusicIndex--;
        }
        cc.audioEngine.playMusic(this.musicDirectory[this.curMusicIndex], false);
        this.m_curMusicLabel.setString("当前播放音乐："+this.musicDirectory[this.curMusicIndex].substr(16));
    },
    nextMusicCallback:function(sender){
        this.curMusicIndex++;
        if(this.curMusicIndex == this.musicDirectory.length)
        {
            this.curMusicIndex = 0;
        }
        cc.audioEngine.playMusic(this.musicDirectory[this.curMusicIndex], false);
        this.m_curMusicLabel.setString("当前播放音乐："+this.musicDirectory[this.curMusicIndex].substr(16));
    },
    playMusicCallback:function(sender){
        cc.audioEngine.playMusic(this.musicDirectory[this.curMusicIndex], false);
        this.m_curMusicLabel.setString("当前播放音乐："+this.musicDirectory[this.curMusicIndex].substr(16));
    },
    stopMusicCallback:function(sender){
        cc.audioEngine.stopMusic();
        this.m_curMusicLabel.setString("音乐播放停止");
    },

    prevSoundCallback:function(sender){
        if(this.curSoundIndex == 0)
        {
            this.curSoundIndex = this.soundDirectory.length-1;
        }
        else
        {
            this.curSoundIndex--;
        }
        cc.audioEngine.playEffect(this.soundDirectory[this.curSoundIndex], false);
        this.m_curSoundLabel.setString("当前播放音效："+this.soundDirectory[this.curSoundIndex].substr(22));
    },
    nextSoundCallback:function(sender){
        this.curSoundIndex++;
        if(this.curSoundIndex == this.soundDirectory.length)
        {
            this.curSoundIndex = 0;
        }
        cc.audioEngine.playEffect(this.soundDirectory[this.curSoundIndex], false);
        this.m_curSoundLabel.setString("当前播放音效："+this.soundDirectory[this.curSoundIndex].substr(22));
    },
    playSoundCallback:function(sender){
        cc.audioEngine.playEffect(this.soundDirectory[this.curSoundIndex], false);
        this.m_curSoundLabel.setString("当前播放音效："+this.soundDirectory[this.curSoundIndex].substr(22));
    },
    stopSoundCallback:function(sender){
        cc.audioEngine.stopEffect();
        this.m_curSoundLabel.setString("播放音效停止");
    }
});

结果是，除了ios端有一个ogg播放不了，这个音乐播放小程序在各个平台ogg都能正常播放。

但放到我的游戏项目中结果又不一样了

----PC浏览器，音乐音效采用ogg可以正常播放

----安卓端浏览器，音乐音效采用ogg可以正常播放

----IOS端浏览器，音乐无法播放ogg，可以播放mp3， 音效无法播放ogg和mp3，可以播放wav

不过cocosdension如果一种格式不能播放会自动搜寻其他格式，所以背景音乐同目录下放了ogg和mp3两种格式，音效则放了ogg和wav格式，

不能播放问题就解决了，

播放延迟卡顿问题：

    如果你的音乐音效没有预加载，第一次播放音乐音效会有延迟，如果文件较大延迟会比较厉害，可以将资源路径添加到预加载目录，预加载避免延迟

    不过预加载会明显影响游戏加载速度，可能会导致画面卡住，如何取舍看个人了。

ios端浏览器第一次进场景加载音乐不能播放问题：

    原因是因为苹果的移动端浏览器不能自动播放音频，只能由用户的触摸（点击）事件触发加载，进游戏时音乐没有播放，苹果定的规则只能遵守了

    我的办法是在第一个场景做下判断，如果是手机端的ios浏览器，创建一个顶层的Layer，并添加事件，在触发onTouchBegan时playMusic就行了。

if(cc.sys.isMobile && cc.sys.os === cc.sys.OS_IOS)
        {
            var musicStartLayer = new cc.Layer();
            musicStartLayer.x = 0;
            musicStartLayer.y = 0;
            this.addChild(musicStartLayer);

            var listener = cc.EventListener.create({
                event: cc.EventListener.TOUCH_ONE_BY_ONE,
                swallowTouches: false,
                onTouchBegan: function(touch, event){
                    if(!self.isFirstTouch)
                    {
                        self.isFirstTouch = true;
                        cc.audioEngine.playMusic("res/music.ogg");
                    }
                    return true;
                }
            });
            cc.eventManager.addListener(listener, musicStartLayer);
        }