近日接到老板一个需求，需要在全流程关键节点(成功/失败)伴随音频播报，老板说这样显得逼格高一点(心里想，真的假的哦，加个语音就能逼格上个台阶？？)，没办法老板说的需求再不合理也要完成。。。
首先确认好哪些节点需要语音播报，确定好后去找配音，由于之前公司使用讯飞配音会员到期又不想续，于是找到一个免费的配音网站在线免费文字转语音 - TTSMaker官网 | 马克配音
配音完成后下载wav格式的音频方面music目录，由于项目使用的是vue2，于是我在data中实例化howl
soundBgm：new Howl({
src: [require("@/assets/music/phoneFail.wav")],
autoplay: false, // 是否自动播放，默认为false
preload: false, // 是否预加载音频，默认为true
})
然后只需要对应需要播放语音的函数里增加this.soundBgm.play()即可。如果你是需要像我一样不想创建多个实例对象，只单纯改播放的语音那么你可以
this.soundBgm && this.soundBgm.stop();
this.soundBgm._src = require("@/assets/music/loginFail.wav");
this.soundBgm.load();
this.soundBgm.play();
注意，在使用过程中还遇到几个坑点
- 通过this.soundBgm._src必须要this.soundBgm.load(),不load更改不会生效
- 更换语音src后播放的时候发现语音只播放一段，实例化时语音是phoneFail是3s语音，后续通过this.soundBgm._src更改语音为loginFail是5s语音。那么你在播放loginFail语音时发现播放一段就突然停止了。找了半天发现是实例化时preload为true导致的。为true的时候soundBgm容器就固定3s语音，即使后续load()也无法改变
- 还有一大坑点因为我们项目是在滑动滑块后给一个语音提示，滑动操作中或者操作完在IOS系统的safari浏览器下死活不触发语音，安卓系统中各个浏览器或者IOS系统下夸克等系统均可以语音正常播放。查了许久发现如今各大浏览器中，是不允许在用户还未与浏览器进行交互就自动播放语音的，但偏偏奇怪的是点击操作，触摸滑动是交互，但safari貌似不承认滑动操作？？测试过先点击一下屏幕然后滑动滑块是有语音提示。
文档：
Comments NOTHING