CONTENT

开发过程中,遇到这样一个需求,由于游戏一个背景音乐太过单调,因此需要在音乐设置界面加上一个音乐列表,用户可以从提供的音乐列表中选择一个作为游戏的背景音乐。

需求很简单,只需要使用下拉列表加载所有的背景音乐,当用户选择一个音乐的时候把当前播放音乐切换为选择的音乐就好,然而,事情并没有想象中的这么简单。

项目刚开始在PC端运行时一切功能正常,在Android上面也无问题,然而在使用IphoneXS上的Safari打开项目时,多次切换背景音乐会导致音量控制失效,甚至使用苹果手机侧边关闭声音的按钮都失效(关闭声音而非手机的音乐调节按钮)。

刚开始进行错误排查时,以为是声音控制的写法不对,于是使用了SoundChannel 来进行控制播放与音量大小的调节,然而还是不起作用。

然后在看官方文档的时候,有提到对声音文件的格式和比特率的要求,一开始也以为是这个原因,测试之后发现还是不行,到这一步已经是山重水复疑无路了,不过还好,接下来却找到了解决问题的办法。

在文档中有提到HTML5的音频播放,当前有两种主流的方式,一种是Audio标签播放,另一种是WebAudio二进制播放。LayaAir引擎封装了WebAudio与Audio,在支持WebAudio的浏览器上,优先使用WebAudio,在不支持WebAudio的浏览器上使用Audio,而问题恰恰就出在这里。
ios中,使用Audio标签播放的时候,会拒绝传入的音量,也就是说设置音量是无效的,那么为什么初次使用是有效的呢?原来LayaBox初次播放音乐是使用的WebAudio,然而在切换之后变为了Audio,这就导致无论怎么改变音量也不生效。

问题找到,那么解决方案自然很快出来:

LayaBox已经给我们提供了强制设置使用WebAudio而不使用Audio的功能,使用WebAudio对性能的消耗比较大,不过为了实现这个功能,所以也不得不牺牲部分的性能,不过好在只是ios上需要设置。

在初始化Laya之后设置声音模式代码:


//如果在ios上需要关闭audioMusic 使用webAudio
if (Browser.onIOS) {
	Laya.SoundManager.useAudioMusic = false;
}

 

写了一个Demo,代码如下:

加载资源并添加一个ui界面。


//程序入口
Laya.init(600, 400, WebGL);
//屏幕适配 缩放模式
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_AUTO;
//激活资源版本控制
Laya.ResourceVersion.enable("version.json", Handler.create(null, beginLoad), Laya.ResourceVersion.FILENAME_VERSION);

function beginLoad() {
	let assetsArr = [
		{ url: "res/atlas/comp.atlas", type: Laya.Loader.ATLAS },
	];
	let index: number;
	for (index = 0; index < 4; index++) {
		assetsArr.push({ url: "sound/bgmusic" + index + ".mp3", type: Laya.Loader.SOUND });
	}

	Laya.loader.load(assetsArr, Handler.create(null, onLoaded));
}

function onLoaded(): void {
	//实例UI界面
	var testUI: TestUI = new TestUI();
	Laya.stage.addChild(testUI);
}

TestUI中的内容为:


import Label = Laya.Label;
import Handler = Laya.Handler;
import Loader = Laya.Loader;
import WebGL = Laya.WebGL;
import SoundManager = Laya.SoundManager;
//可选择的背景音乐数量
const BG_COUNT: number = 4;
class TestUI extends ui.test.TestPageUI {
	//音量
	private musicConfig: number = 1;
	//选择的音乐索引
	private musicIndex: number = 0;
	//播放音乐通道
	private soundChannel: Laya.SoundChannel = null;
	constructor() {
		super();
		this.initData();
		this.initListener();
	}
	//初始化数据显示
	private initData(): void {
		//构造下拉选择框 背景音乐列表 文本
		let labels: string = '';
		let i: number;
		for (i = 0; i < BG_COUNT; i++) {
			labels = labels.concat('音乐' + i);
			if (i < BG_COUNT - 1) {
				labels += ','
			}
		}

		this.musicList.labels = labels;
	}
	//事件
	private initListener(): void {
		this.slider.changeHandler = Handler.create(this, this.musicSliiderChangeFun, null, false);
		this.musicList.selectHandler = new Handler(this, this.selectMusicListItem);
	}
	private selectMusicListItem(index: number): void {
		this.musicIndex = index;
		this.playMusic(this.musicIndex);
	}
	private playMusic(index: number): void {
		let musicPath = "sound/bgmusic" + index + ".mp3";
		if (this.soundChannel) {
			this.soundChannel.stop();
			SoundManager.destroySound(this.soundChannel.url);
		}
		this.soundChannel = SoundManager.playMusic(musicPath, 0);
		//配合设置音量中的62行代码使用  
		//  this.soundChannel.volume = this.musicConfig;
	}
	//音量滑动条改变
	private musicSliiderChangeFun(index: number): void {
		this.musicConfig = index / 100;
		this.setVolume();
	}
	//设置音量
	private setVolume(): void {
		this.slider.value = this.musicConfig * 100;
		// this.soundChannel.volume = this.musicConfig;
		Laya.SoundManager.setMusicVolume(this.musicConfig);
	}
}

设计界面为:

 

Comments | NOTHING

暂无评论...