遇到需要播放音频的需求我们鈈一定要使用audio标签,还可以用音频API AudioContext来帮助我们完成
前一段在做世界杯超级直播间时有送礼物的需求,例如下图(为了显示这里调成了無限播放):
只有动画不够,我们需要有声音
没有用audio,一是不想多插入一个DOM节点二是想跟随系统的状态,即手机调成震动/静音模式了这个声音也就不要出了。这个时候AudioContext就可以帮上忙了代码如下。
上述的createSound
方法其实没必要那么复杂因为这里其实只是简单的加载了一个線上音频,并没有用js来生成音频所以增益器、分析器什么之类的可以不使用,简化版如下:
在使用中我们发现ios手机,经常会切home键回来後音频不播放了,查了一下文档发现
再回到原网页很大概率会进入到suspended
状态
这时候,无论怎么调用start 或者干脆new AudioContext()
后重新调用音频都不会再播放
,可以监听到挂起后就重置但是不建议这么做,毕竟系统自动挂起是为了节约性能我们按需重启即可。
使用上可以在页面load后preload音頻
除了很老旧的机型之外,这个方法播放都是没有问题的放心使用。
一个音频库Tone还没看实现