LayaAir 音乐与音效

àì夳堔傛蜴生んèń 2022-04-03 08:16 415阅读 0赞

**目录**

音乐与音效·概述

SoundManager

音乐与音效·运用

运用入门

复合应用

--------------------

# 音乐与音效·概述 #

1、HTML5 的音频播放，在当前有两种主流的方式，一种是 Audio 标签播放，另一种是 WebAudio 二进制播放。

2、Audio 属于 dom 元素，带有 ui 界面，在移动端 Audio 属于边下载边播放，适合声音文件比较大的文件(如背景音乐)，但是 Audio 在移动端会有手势的限制，官方的 gesture-requirement-for-media-playback 属性表明必须有用户的手势操作才可以播放。意思是在移动设备上Audio无法自动播放，必须由用户手动操作后才可以播放。

3、WebAudio 是一种新的声音播放形式，可以加载多个声音进行合成，通过二进制文件解码成浏览器支持的格式进行播放。而且用这个接口甚至可以实现音频普的动画效果，让声音有了合成的功能。

4、通过调用 [laya.media.SoundManager API ][laya.media.SoundManager API]接口就可以直接播放音频(音乐/音效)。

**音乐 VS 音效**

1、音乐：指游戏用的背景音乐，采用 laya.media.SoundManager 音频管理类中的 [playMusic ][playMusic]方法进行播放，由于是背景音乐，playMusic 方法只能同时播放一个音频文件。

2、音效：采用的是 laya.media.SoundManager 音频管理类中的[ playSound ][playSound]方法，允许同时播放多个音频文件。

音频兼容性

由于音频播放在各个浏览器兼容性不同，在开始使用前，需要做好前期的兼容准备。

1）使用类似“格式工厂”等音频文件转换工具，选择采样率：44100Hz，比特率：96kbps 进行转换

2）音频文件尽量小，不仅仅是带宽的限制，还有浏览器音频解码的效率问题

3、建议背景音乐用 mp3 类型，音效用 wav 或者 mp3 类型，如果打包为 app，音效只能用 wav 格式

## SoundManager ##

<table> 
 <tbody> 
  <tr> 
   <td style="width:132px;"><strong>Package</strong></td> 
   <td>laya.media</td> 
  </tr> 
  <tr> 
   <td style="width:132px;"><strong>类</strong></td> 
   <td>public class SoundManager</td> 
  </tr> 
  <tr> 
   <td style="width:132px;"><strong>Inheritance</strong></td> 
   <td>SoundManager <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181221111012462"> Object</td> 
  </tr> 
 </tbody> 
</table>

1、SoundManager 是一个声音管理类，提供了对背景音乐、音效的播放控制方法

2、 引擎默认有两套声音方案：WebAudio 和 H5Audio 。播放音效时，优先使用 WebAudio 播放声音，如果 WebAudio 不可用，则用 H5Audio 播放（因为音效通常文件小，播放时间短）

3、使用 H5Audio 播放背景音乐（因为音乐通常文件大，时间长。 WebAudio 会增加特别大的内存，并且要等加载完毕后才能播放，有延迟）

4、H5Audio 在部分机器上有兼容问题（比如不能混音，播放有延迟等）。本文使用 LayaAir 2.0.0beta5 版本。

# 音乐与音效·运用 #

## 运用入门 ##

**一：音效播放**

/\*\*播放音效。音效可以同时播放多个。  
 \* @param url           声音文件地址。  
 \* @param loops         循环次数,0表示无限循环 ,默认是 1.  
 \* @param complete      声音播放完成回调  Handler对象。  
 \* @param soundClass    使用哪个声音类进行播放，null表示自动选择。  
 \* @param startTime     声音播放起始时间。  
 \* @return SoundChannel对象，通过此对象可以对声音进行控制，以及获取声音信息。  
 \*/  
static **playSound**(url: string, loops?: number, complete?: Handler, soundClass?: any, startTime?: number): SoundChannel;注意点一：音效播放时，默认情况下如果窗口失去焦点，则立即停止播放，当窗口后续再获得焦点时，也不会再继续播放。可以使用 Laya.SoundManager.autoStopMusic 属性设置失去焦点后是否自动停止音乐/音效。

注意点二：移动端时音频文件必须是 .wav 才能正常播放，否则如 mp3 格式时会没有声音。

//初始化引擎
    Laya.init(600,400,Laya.WebGL);
    
    //playSound播放音效，可以同时支持播放多个，可以是网络文件，也可以本地文件，如果是播放本地音频，则需要确保音频文件在输出目录 bin 目录下
    Laya.SoundManager.playSound("https://layaair.ldc.layabox.com/demo/h5/res/sounds/btn.mp3");
    //sound/hit.wav 必须在 bin 目录下，否则找不到文件:ERR_FILE_NOT_FOUND，联系播放3次
    Laya.SoundManager.playSound("sound/hit.wav",3);
    //autoStopMusic可指定窗口失去焦点后是否仍然播放音效/音乐
    Laya.SoundManager.autoStopMusic = false;
    //PC 端时 mp3 与 wav 格式都可以播放；移动时必须是 wav 格式，否则无法播放

窗口一出来，就会自动播放音效。

**二：音乐播放**

/\*\*播放背景音乐。背景音乐同时只能播放一个，如果在播放背景音乐时再次调用本方法，会先停止之前的背景音乐，再播发当前的背景音乐。  
 \* @param url       声音文件地址。  
 \* @param loops     循环次数,0表示无限循环。默认为0，循环播放  
 \* @param complete  声音播放完成回调。  
 \* @param startTime 声音播放起始时间。  
 \* @return SoundChannel对象，通过此对象可以对声音进行控制，以及获取声音信息。  
 \*/  
static **playMusic**(url: string, loops?: number, complete?: Handler, startTime?: number): SoundChannel;

//初始化引擎
    Laya.init(600,400,Laya.WebGL);
    
    //背景音乐只能同时播放一个、默认为无线循环播放
    //默认情况下如果游戏窗口失去焦点，则立即停止播放，可以使用 Laya.SoundManager.autoStopMusic = false 设置失去焦点后是否自动停止音乐/音效
    //同样 PC 端时，音频文件 mp3、wava格式都可以，但是移动端时必须是 wav格式，否则无法正常播放
    Laya.SoundManager.playMusic("https://layaair.ldc.layabox.com/demo/h5/res/sounds/bgm.mp3");
    //Laya.SoundManager.playMusic("sound/cartoon.wav");//当为本地文件时，必须在输出目录 bin 目录下存在

窗口一出来，就会自动播放音效。

## 复合应用 ##

先看几个常用的 API。

> /\*\*失去焦点后是否自动停止背景音乐。默认失去焦点后停止播放  
> \* @param v Boolean 失去焦点后是否自动停止背景音乐。  
> \*/  
> static autoStopMusic: boolean;
> 
> /\*\*所有音效（不包括背景音乐）是否静音。  
>  \* 注意1：播放音效的时候改变 soundMuted 为 true，并不能将当前播放的音效立即静音，它仍会播放直到完毕  
>  \* 而其他音效显然是没有声音的.  
>  \*/  
> static soundMuted: boolean;
> 
> /\*\* 背景音乐（不包括音效）是否静音。  
>  \* 注意1：播放音乐时，改变 musicMuted 为 true，则立即对当前音乐进行静音  
>  \* 注意2：静音不代表停止播放  
>  \*/  
> static musicMuted: boolean;
> 
> /\*\*停止播放所有声音（包括背景音乐和音效）。  
>  \*/  
> static stopAll(): void;

//使用立即执行函数方式
    (function(){
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750,Laya.WebGL);
        
        //btnWidth、btnHeight 分别为按钮的宽与高
        var btnWidth = 150;
        var btnHeight = 50;
    
        //设置两个音效地址与两个音乐地址
        var soundUrl_1 = "http://img02.tuke88.com/preview_music/00/00/27/xf-5b87ae9eb41077059.mp3";
        var soundUrl_2 = "http://img02.tuke88.com/origin_music/08/03/18/12c6208fdbf45921fb6a5a88ec0ad94c.mp3";
        var musicUrl_1 = "http://img02.tuke88.com/preview_music/00/00/60/yulan-5b87c00c59d402663.mp3";
        var musicUrl_2 = "http://img02.tuke88.com/preview_music/00/00/60/yulan-5b87c00dbf6701431.mp3";
     
        //1、创建2个音效按钮，2个音乐按钮
        var btn_1= addButton("音效1");
        var btn_2= addButton("音效2");
        var btn_4= addButton("音乐1");
        var btn_5= addButton("音乐2");
    
        btn_1.pos(20,20);
        btn_2.pos(220,20);
        btn_4.pos(20,100);
        btn_5.pos(220,100);
    
        //2、为4个按钮绑定单击事件
        btn_1.on(Laya.Event.CLICK,this,showSound,[soundUrl_1]);
        btn_2.on(Laya.Event.CLICK,this,showSound,[soundUrl_2]);
        btn_4.on(Laya.Event.CLICK,this,showMusic,[musicUrl_1]);
        btn_5.on(Laya.Event.CLICK,this,showMusic,[musicUrl_2]);
    
        //添加按钮 —————— 原理就是先绘制一个图形(如矩形)，然后再绘制文字
        function addButton(showText){
            let button = new Laya.Sprite();
            button.size(btnWidth,btnHeight);//设置精灵/画布/按钮尺寸
            //绘制一个矩形，起点为(0,0)，这样方便添加文字时对齐文本，可以理解为图像相对的是精灵的原点，但是精灵相对是舞台
            //所以后期只要改变精灵的x,y属性即可放置到舞台的任意位置
            button.graphics.drawRect(0,0,btnWidth,btnHeight,"#0078D7");
            
            //在画布上继续绘文本，绘制的起始x位置是画布长度的一半，起始y位置为10，设置字体及大小，设置颜色、线条宽度、以及对其方式
            button.graphics.fillText(showText,btnWidth/2,10,"25px Arial","#fff","center");
    
            Laya.stage.addChild(button);
            return button;
        }
    
        //播放音效————多次调用时，则出现多个音效
        function showSound(url){
    		console.log("播放音效："+url);
            Laya.SoundManager.playSound(url);
            //Laya.SoundManager.autoStopMusic 属性可设置失去焦点后是否自动停止音乐/音效，默认为 true
            // Laya.SoundManager.autoStopMusic = false;
        }
    
        //播放音乐————多次调用时，会自动停掉之前的，然后播放新的
        function showMusic(url){
    		console.log("播放音乐："+url);
            Laya.SoundManager.playMusic(url);
            //Laya.SoundManager.autoStopMusic 属性可设置失去焦点后是否自动停止音乐/音效，默认为 true
            Laya.SoundManager.autoStopMusic = false;//实际中失去焦点后，通常是让它停止音频播放的
        }
    
        //创建一个暂停按钮、一个静音按钮
        var btn_stop = addButton("暂停");
        var btn_mute = addButton("静音");
        btn_stop.pos(20,180);
        btn_mute.pos(220,180);
    
    	//为暂停按钮绑定单击事件，点击"暂停"按钮后，停掉所有的音效与音乐
    	//因为SoundManager并没有提供继续播放的 API，所以再次播放时，只能重新开始播放
        btn_stop.on(Laya.Event.CLICK,this,function(){
    		console.log("暂停所有音频.");
    		Laya.SoundManager.stopAll();//停止播放所有声音（包括背景音乐和音效）。
        });
    
        //flag_muted：当前是否静音的标识————与暂停同理动态改变文本域底色
        //静音——————包括音效和音乐，单击"静音"按钮按钮后，改变按钮的颜色，然后改变按钮上的文本
        var flag_muted = false;
        btn_mute.on(Laya.Event.CLICK,this,function(){
            if(flag_muted==false){
    			console.log("静音操作.");
                Laya.SoundManager.soundMuted = true;//设置音效为静音
                Laya.SoundManager.musicMuted = true;//设置音乐为静音
                
                flag_muted = true;//改变标识
                btn_mute.graphics.clear();//清空画布的所有绘制命令，即之前所绘制的都将消失
                btn_mute.graphics.drawRect(0,0,btnWidth,btnHeight,"#FF4420");//重新绘制矩形
                btn_mute.graphics.fillText("取消静音",btnWidth/2,10,"25px Arial","#fff","center");//重新绘制文本
            }else{
    			console.log("取消静音操作.");
                Laya.SoundManager.soundMuted = false;//设置音效为取消静音
                Laya.SoundManager.musicMuted = false;//设置音乐为取消静音
    
                flag_muted = false;
                btn_mute.graphics.clear();
                btn_mute.graphics.drawRect(0,0,btnWidth,btnHeight,"#0078D7");
                btn_mute.graphics.fillText("静音",btnWidth/2,10,"25px Arial","#fff","center");
            }
        });
    })();

![20181221163250500.gif][]

其余的增大音量、减小音量也是同理，不再累述，可以参考官网示例：[https://layaair.ldc.layabox.com/demo/?category=2d&group=Sound&name=SimpleDemo][https_layaair.ldc.layabox.com_demo_category_2d_group_Sound_name_SimpleDemo]

[laya.media.SoundManager API]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.media.SoundManager
[playMusic]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.media.SoundManager#playMusic%28%29
[playSound]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.media.SoundManager#playSound%28%29
[20181221163250500.gif]: /images/20220403/48aa308431c2459f99897da97e625664.png
[https_layaair.ldc.layabox.com_demo_category_2d_group_Sound_name_SimpleDemo]: https://layaair.ldc.layabox.com/demo/?category=2d&group=Sound&name=SimpleDemo