做H5游戏难免会遇到需要播放背景音乐或者音效的时候。一开始看到这个需求第一反应就是用H5中的audio标签去实现,但是在实现的过程中发现它存在很多的问题。
1.只能播放单一音频(在包括IOS在内的某些设备上)。什么意思呢?就是说如果你同时在播放背景音乐的时候播放音效的话,背景音乐会被停掉。这是一个非常严肃的问题。
2.在IOS中不能预加载。这会导致H5游戏在IOS中播放音效时,只能实时的去拉去音频数据,会对性能造成一定影响。而且在加载的过程中去设置audio的某些属性会报错。
3.在包括IOS在内的部分设备上,只能在原生的click等事件的回调函数中使用,在普通的程序逻辑中调用play方法无法生效。
当H5游戏遇上这些问题,真是没法愉快的玩耍了!IOS对其的支持力度真是让人扼腕!没办法,誰让人家有APP STORE呢……
后来就盯上web audio了。这货不像audio可以有GUI,但是在游戏中我们也不需要GUI,所以如果她在IOS上表现OK的倒是非常值得宠幸的。
搜了下发现了下图,目测IOS支持力度尚可。
中间省略1K字。下面我们来看看她的特点和怪癖。
1.对音频的支持非常到位,支持音频输出和音频波形的合成等。
2.使用时需要实例一个AudioContext或者WebkitAudioContext(取决于浏览器的支持),然后绑定音频。获取音频文件时需要用HTTP传输,比如new XMLHttpRequest()。需要。还需要AudioBuffer()来缓冲音频文件,并且要解码、连接到输出设备等然后再播放。反正就是挺繁琐的……
3.播放使用noteOn(0),android上的Chrome不支持noteOn(0),支持start(0)播放。
4.可以同时播放多个音频。
5.一个对象只能播放一次,如果需要重复播放要生成新的对象。
6.android中原生的浏览器不支持。
7.IOS支持非常完美。
8.可以预加载。
9.第一次播放时需要在click等事件的回调函数里执行,不然会没有声音,后面就不需要了。
通过上面的介绍,可以得知audio与web Audio各占半壁江山,看来也只能同时纳入怀中了~
在实践过程中采用优先使用Web Audio(在使用noteOn(0)时要先判断是否支持这个方法,不支持的话要使用start(0)),如果浏览器不支持则采用audio,比如android设备中的非chrome浏览器,并且做优雅降级,不支持的浏览器只播放单一音频。
虽说做手机游戏远离了IE6的摧残,可以各种设备的兼容性问题也着实让人有些头疼有木有……