LayaAir 音乐与音效

最新推荐文章于 2025-04-11 20:12:56 发布

蚩尤后裔-汪茂雄

最新推荐文章于 2025-04-11 20:12:56 发布

阅读量5.8k

点赞数 4

分类专栏： Layabox(JS)

本文链接：https://blog.csdn.net/wangmx1993328/article/details/85158325

版权

Layabox(JS) 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍HTML5音频播放的两种主流方式：Audio标签和WebAudio，以及如何使用LayaAir引擎的SoundManagerAPI进行音乐和音效的播放控制。探讨了不同格式音频文件的兼容性问题，提供了播放代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

音乐与音效·概述

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

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

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

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

音乐 VS 音效

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

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

音频兼容性

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

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

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

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

SoundManager

Package	laya.media
类	public class SoundManager
Inheritance	SoundManager Object

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");
        }
    });
})();