这几天用月影的spritejs的canvas框架做了一个移动端的小游戏，抛开技术选型和功能逻辑本身（因为时间关系并没有做太多调研，实际上H5游戏的性能问题是个很大的瓶颈，开发当中不停地在做优化处理，依然会在个别手机上遇到问题），这篇文章只大概说下BGM和碰撞音效共存情况下，对audio的处理~
初版设计稿（敲！黑！板！这只是设！计！稿！）如图。手指能够全屏幕move机器人，吃东西得分，撞墙或撞砖就死掉了，一开始速度比较慢，越玩速度越快，请自行脑补，哈哈哈~~~
360扫地机器人H5小游戏
众所周知的，有交互才能‘激活’<audio>，可是6个audio怎么办？
当页面上只有一个background-audio的时候，你去监听一个click或是一个touchstart让audio去play，很好足够了。可是如果再加上5种音效呢？6个audio同时play()，还得让其中5个快速pause()，恶心不恶心？
你去start the game的时候很可能卡得要死，还得看着console里面报出来的play()和pause()冲突的大红字，很不爽。
这个时候，一个叫audio sprite（ 推荐两个：audiosprite和 howler）的东西就很有用了（UC不支持，真想说UC太垃圾！）。sprite都知道吧，雪碧图没少用吧。audio的sprite也类似，这对于网页游戏来说简直就是神器：几段音效合成在一起，想播放哪段只需调一个超级简单的API就可以了。
// 引入js
<script src="https://lib.baomitu.com/howler/2.0.5/howler.min.js"></script>
// new 一个audioSprite实例，把合成的mp3里面的每段音效起始、持续时间赋值，并初始化好其他的属性。
const audioSprite = new Howl({
src: ['https://s3.ssl.qhres.com/static/a137eff5aa00dca9.mp3'],
sprite: {
battery: [8000, 1018],
readygo: [5000, 1384],
dust: [0, 1018],
wall: [3000, 653]
},
preload: true,
volume: 1
});
// 父类
class Waste {
constructor (options) {
Object.assign(this, options)
}
playAudio ( ) {
audioSprite.play(this.audio)
}
}
// 子类
class Dust extends Waste ( ) {
super({
...
audio : 'dust',
...
})
}
// 需要播放音效的时候，只需要一句代码：
item.playAudio()
如果你没写class，大可以用audioSprite.play('battery')去播放电池的音效，也可以用audioSprite.play('wall')去播放撞墙时候的音效。用法就是这么简单。
当然了，如果产品只给了你几个.mp3说“拿去用吧”，那么这段合成的mp3该怎么得到呢？听我一句劝，不要指望别人给你现成的合成好的mp3，因为很可能每段音效的起始时间不准确，也可能两种音效之间没有空白。就好比一张好的精灵图上，精灵之间应该是有那么1、2像素的间隔的。
所以我还可以告诉你，FFmpeg也是个好东西，用它去把你那几个碎碎的audio合成你想要的audiosprite.mp3就OK了。
<audio>在移动端上，永远都有坑的
暂且不用说安卓，目前iphone上iOS 8~11这几个系统加上iphoneSE这种奇葩的机器，就够你兼容好一阵子。
拿背景音乐来说，你以为让<audio id="bgMusic"></audio>里面加一个loop就可以了么？那你真的太天真了。
在iOS 11之前或是不考虑iphoneSE的时候，对待loop不好使的处理方式是这样的：
// audio里的loop照写不误
<audio id="bgMusic" src="https://s3.ssl.qhres.com/static/b35b351614bf68c2.mp3" loop></audio>
// js当中监听audio的ended事件
bgAudio.addEventListener('ended', function(){
this.currentTime = 0;
this.play();
}, false);
然而在iphoneSE当中，一旦你加了loop，它就监听不到ended事件了。
（有一部分的Android，如果你不加loop，用ended监听也是没用的，所以舍弃iphoneSE还是舍弃Android，你说了算吧。）
更！然！而！在iOS 11当中，loop这个东西非但不好使，还阻碍ended事件被监听，而且就算去掉loop，虽然能监听到ended事件，this.currentTime = 0;this.play();也还是不起作用。那怎么办？
//initial的时候
if((navigator.userAgent.match(/os\s+(\d+)/i)[1] - 0) == 11){
bgAudio.loop = false
}
bgAudio.addEventListener('ended', function(){
if((navigator.userAgent.match(/os\s+(\d+)/i)[1] - 0) == 11){
this.src = bgMusicSrc
} else {
this.currentTime = 0; // 毕竟把currentTime置为0的性能更好些
}
this.play()
}, false)
但是如果不想在iOS 11中两边循环之间听出来有音乐的间断，必须在html的audio里面加上preload
<audio id="audio" src="https://s3.ssl.qhres.com/static/b35b351614bf68c2.mp3" preload="auto" loop></audio>
总结一下，如果想让audio的loop功能在更多的手机里实现，
audio标签里要加上loop和preload；
js里要在iOS 11把loop置为false，还要在ended事件当中对audio做不同的处理：this.src = bgMusicSrc或者this.currentTime = 0，然后再this.play()
网友评论