Phaser.js音频资源处理篇

概述

1. 支持两种音频模式
   
   • webAudio
     
     • 缺点:无法对音频进行进一步的控制, 不能播放两个音轨
   • html5Audio
     
     • 以节点表示音频流

2. Phaser.SoundManager对象

   var game = Phaser.Game();var soundManager = game.sound;

3. Phaser.Sound对象

   var game = Phaser.Game();var sound = game.add.audio(key, volume?, loop?);//volume 表示音量大小

音频资源的加载

1. 加载单一资源

   var game = new Phaser.Game();game.load.audio(key, urls, autoDecode?);    // urls是字符串或者字符串的数组,这里字符串的数组是不同格式的优先使用

2. 加载audiosprite资源

   • game.load.audiosprite(key, urls, jsonURL?, jsonData?, autoDecode?);

   • autosprite生成工具:https://github.com/tonistiigi/audiosprite

   • 实例

     function state(){    this.init = function(){        game.scale.pageAlignHorizontally = true; //水平居中        game.scale.pageAlignVertically = true; //垂直居中    }    this.preload = function(){        game.load.audio('sound1', 'asset/audio/1.mp3');        game.load.audiosprite('audiosprite', [            'asset/audio/myaudiosprite.ogg',            'asset/audio/myaudiosprite.m4a',            'asset/audio/myaudiosprite.mp3',            'asset/audio/myaudiosprite.ac3'        ], 'asset/audio/myaudiosprite.json');    }    this.create = function(){        var sound = game.add.audio('sound1');        var audiosprite = game.add.audioSprite('audiosprite');    }}

使用和管理

1. 音频播放控制
   

2. 实例

       function state(){    this.init = function(){        game.scale.pageAlignHorizontally = true; //水平居中        game.scale.pageAlignVertically = true; //垂直居中    }    this.preload = function(){        game.load.audio('music', 'asset/sound/1.mp3');        game.load.image('btn_play', 'asset/sound/btn_play.png');        game.load.image('btn_pause', 'asset/sound/btn_pause.png');        game.load.image('btn_resume', 'asset/sound/btn_resume.png');        game.load.image('btn_stop', 'asset/sound/btn_stop.png');    }    this.create = function(){        var sound = game.add.audio('music', 0.1);        var btn_play = game.add.button(260, 20, 'btn_play', function(){            sound.play(); //播放        });        var btn_pause = game.add.button(260,145, 'btn_pause', function(){            sound.pause(); //暂停        });        var btn_resume = game.add.button(260, 280, 'btn_resume', function(){            sound.resume(); //恢复        });        var btn_stop = game.add.button(260, 415, 'btn_stop', function(){            sound.stop(); //停止        });    }}

3. 声音的分段标注

   //标注声音//sound.addMarker(name, start, duration, volume?, loop?); //播放标注的声音//sound.play(name);//移除标注//sound.removeMarker(name);    function state(){    this.init = function(){        game.scale.pageAlignHorizontally = true; //水平居中        game.scale.pageAlignVertically = true; //垂直居中    }    this.preload = function(){        game.load.audio('music', 'asset/sound/1.mp3');        game.load.image('btn_play', 'asset/sound/btn_play.png');    }    this.create = function(){        var sound = game.add.audio('music', 0.1);        sound.addMarker('marker1', 5, 1);        var btn_play = game.add.button(260, 20, 'btn_play', function(){            sound.play('marker1'); //播放        });    }}

4. 声音的淡入淡出
   

           function state(){        this.init = function(){            game.scale.pageAlignHorizontally = true; //水平居中            game.scale.pageAlignVertically = true; //垂直居中        }        this.preload = function(){            game.load.audio('music', 'asset/sound/1.mp3');            game.load.image('btn_play', 'asset/sound/btn_play.png');            game.load.image('btn_pause', 'asset/sound/btn_pause.png');        }        this.create = function(){            var sound = game.add.audio('music');            var btn_play = game.add.button(260, 20, 'btn_play', function(){                sound.fadeIn(3000); //淡入            });            var btn_pause = game.add.button(260,145, 'btn_pause', function(){                sound.fadeOut(3000); //淡出            });        }    }    ```5. 声音事件![这里写图片描述](http://img.blog.csdn.net/20160527010912535)    ```    function state(){    this.init = function(){        game.scale.pageAlignHorizontally = true; //水平居中        game.scale.pageAlignVertically = true; //垂直居中    }    this.preload = function(){        game.load.audio('music', 'asset/sound/1.mp3');        game.load.image('btn_play', 'asset/sound/btn_play.png');        game.load.image('btn_pause', 'asset/sound/btn_pause.png');        game.load.image('btn_resume', 'asset/sound/btn_resume.png');        game.load.image('btn_stop', 'asset/sound/btn_stop.png');    }    this.create = function(){        var sound = game.add.audio('music');        sound.onPlay.add(function(){            alert('play');        });        sound.onPause.add(function(){            alert('pause');        });        sound.onResume.add(function(){            alert('resume');        });        sound.onStop.add(function(){            alert('stop');        });        var btn_play = game.add.button(260, 20, 'btn_play', function(){            sound.play(); //播放        });        var btn_pause = game.add.button(260,145, 'btn_pause', function(){            sound.pause(); //暂停        });        var btn_resume = game.add.button(260, 280, 'btn_resume', function(){            sound.resume(); //恢复        });        var btn_stop = game.add.button(260, 415, 'btn_stop', function(){            sound.stop(); //停止        });    }}