H5小游戏中音频和音效的处理

这几天用月影的spritejs的canvas框架做了一个移动端的小游戏，抛开技术选型和功能逻辑本身（因为时间关系并没有做太多调研，实际上H5游戏的性能问题是个很大的瓶颈，开发当中不停地在做优化处理，依然会在个别手机上遇到问题），这篇文章只大概说下BGM和碰撞音效共存情况下，对audio的处理~

初版设计稿（敲！黑！板！这只是设！计！稿！）如图。手指能够全屏幕move机器人，吃东西得分，撞墙或撞砖就死掉了，一开始速度比较慢，越玩速度越快，请自行脑补，哈哈哈~~~

360扫地机器人H5小游戏

众所周知的，有交互才能‘激活’

当页面上只有一个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


// 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了。

暂且不用说安卓，目前iphone上iOS 8~11这几个系统加上iphoneSE这种奇葩的机器，就够你兼容好一阵子。
拿背景音乐来说，你以为让里面加一个loop就可以了么？那你真的太天真了。
在iOS 11之前或是不考虑iphoneSE的时候，对待loop不好使的处理方式是这样的：

// audio里的loop照写不误


// 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的loop功能在更多的手机里实现，
audio标签里要加上loop和preload；
js里要在iOS 11把loop置为false，还要在ended事件当中对audio做不同的处理：this.src = bgMusicSrc或者this.currentTime = 0，然后再this.play()