做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的摧残，可以各种设备的兼容性问题也着实让人有些头疼有木有……

audio与Web Audio