前言
在工作中遇到需要开发一个h5类似于水果机（老虎机）的游戏功能，搜寻过许多发现并没有什么例子以及合适的demo，然后自己就通过九宫格抽奖的逻辑，开发出一款网页版小游戏，开发过程中遇到最大的难题，就是音频不同步的问题，搜索了许多方案，都不是很理想，一开始我用的是原生Js，audio去写的控制音频的播放暂停，出现各种兼容性问题，因为页面所需要的音频太多了，safari浏览器是最难处理的。最终通过使用howler.js解决确实能避免很多兼容性的问题，看到网上对此教程的不多，也没有什么详细解决各种端的音频问题！！！所以在工作之余突发奇想写一篇记录一下本人使用此插件开发的过程遇到的问题和如何解决的。
类似下方图片功能都有，以及各种中奖效果
这是第三次记录文章，感兴趣的小伙伴可以先去官网看看这款音频插件。
Howler.js 为通过 JavaScript 使用音频提供了一致的 API，可以控制常见的音频模式，包括播放、暂停、搜索速率、淡入淡出和循环播放。在可能的情况下，音频文件会被自动缓存起来，用以提高播放性能。
安装
npm i howler 我这里使用下载的是2.2.3版本
引入
import {Howl, Howler} from 'howler';
创建音频实例
这里例举一些属性，详情的可以去看官网
//我这里以背景音乐为例子（这里我把所有音乐都放在sounds下）
this.sounds.bg = new Howl({
src: ['../spin/music/bg.mp3'],
html5:false, // 流式音频（用于实时音频或大文件）边加载边播放，不需要全部加载才播放
//（htlm5一般都要设为true，否则可能会造成无法播放）
loop:false,// 循环播放
preload:true,//默认创建时预加载
autoplay: false,// 自动播放
mute:false,//静音
volume: 1,// 音量0-1
sprite：{
s0:[0,500],
s1:[677,1214],
}，//类似于精灵图，把音频分段通过this.sounds.bg.play（'s0'）调用所对应截取的音频段，以毫秒级为单位
rate: 1,//播放速度 0.5 - 4，
pool：5，//类似数据库中的连接池，保留了一个池来回收利用以提高性能。声音暂停不会从池中删除。
});
使用中遇到的问题
1.ios进入页面无法自动播放背景音乐
默认情况下，移动浏览器和 Chrome/Safari 上的音频被锁定，直到在用户交互中播放声音，然后在页面会话的其余部分正常播放
官网解决方法
Howler.autoUnlock = false;
我的解决办法
在实际场景中我的测试手机iphone6 plus 是完美进入页面可自动播放的
但是在iphoneX以上版本是无法自动播放的，搜寻相关问题发现是IOS兼容问题，apple官网也解释了无法在用户无任何触摸操作下自动播放音频好像是为了防止盗取流量等机制，在进入游戏页面时我加了一个遮罩层，类似于开始游戏这样的欢迎弹窗，监听用户关闭弹窗的情况，去播放音频是完美运行的，这种情况在进入页面自动播放就可正常播放，我觉得可能是因为vue是spa机制所以说在第二次进入页面的时候有缓存，所以就可以自动播放了。
2.按钮音频快速点击时音频播放速度跟不上手速
实际操作环境就是下方按钮绑定的单独的do、re、mi、fa、sol、la、si,点击的时候播放对应的音频文件，但是实际用户可能想很快的点击就会出现音频跟不上用户的手速，这点我也找了很多方案，结果还没找到如何解决，我觉得可能就要借助游戏引擎之类的去实现对音频的绝对控制，浏览器支持同时播放音频的数量好像并不对，而且下个音频播放完也才能播放紧接着的同实例不同源的情况，我尝试了使用sprite分割音频，发现并不理想，有可能会出现音频首尾延迟或者这段音频中夹杂着上一段的尾部（这点可能是我分段的太细，两段音频之间间距太近，剪辑问题）具体可能需要专业人员指点。最后我把每段音频尽量的去缩短，如果用户不在非常快的情况下，按钮音频还是没有问题的。
3.safari音频切换过程中音频缺失问题
问题环境是在开始游戏转圈的过程分为三段到四段音乐 开始转圈 加速转圈 减速转圈 停止。对应着四段音频，转圈的方法我是设置了时间速度没有固定路程，为了实现那种转速看起来捉摸不定的感觉，根据时间判断什么时候减速，停止的话是固定速度 我写了一个映射表 停止的位置的前四个位置，到达减速位置播放对应的停止音频，然后到达停止位置播放，中奖音频或者未中奖音频。在safari浏览器中，开始转动有时候音频可能偶尔会出现某段音频不播放，这种情况我也不知道怎么排查音频是加载了，在除ios系统的手机上其他的都没有问题，总感觉还是ios的问题，ios的兼容问题真的很烦人，最后我是对四段音乐单独进行控制，达到某种情况上一段音乐停止，下一段音乐播放。
最后
总体来说整个游戏以及最后流程和音效搭配效果跟真实游戏差不多，以上遇到的问题哪里说的不够严谨以及哪里有问题寻求高人指点。想要源码的兄弟们可以私聊我，一起探讨技术，我只是一个刚毕业工作不到一年的小小前端，望大家指正。
