一个一线前端攻城狮的快应用开发之路：3、Audio的完全方案

一、场景

笔者参与开发的是一款音乐类的快应用产品，自然就需要用到audio的组件和相关api，之前在H5中已经做过音频播放的相关功能，这次开发快应用以为可以复用大部分代码，结果发现还是有些不同。除此之外，因为是体验更好的快应用，所以有一些H5做不到或者效果不好的功能希望能在快应用上实现，例如跨页播放状态同步、全局无刷新小播放器等等。

二、Audio的问题及解决方案

（1）、切歌

在H5中，可以直接使用audio.play()来切歌，但是在快应用中切歌需要先audio.pause()，并且不能audio.pause()后直接播放新歌曲，需要在onpause的监听中，确保已被暂停后，再开始播放新的歌曲（赋值新的歌曲src）。

（2）、播放状态和图标显示的同步

首先需要全局存储当前播放的歌曲id、播放状态等信息，各个页面或组件可以对比状态显示不同的图标。
当audio组件被赋值一个新的音频src，流程大概是：
onplay > onloadeddata：
所以页面图标显示就是：
图标：默认 > onplay > 图标：加载中 > onloadeddata > 图标：播放中：
但是，笔者发现对于同一首歌，听了别的歌，又切回来时，实际上音频文件已被缓存，因此不会再次进入onloaddata。
所以我做了单独的处理，缓存进入过onloaddata的歌曲id列表，对于进入onplay的歌曲id进行筛选，如果已缓存过，则直接将图标设置为播放中。

（3）、跨页面音频播放状态同步

假设A页面是榜单，B页面是分类歌曲，某首歌在两个页面都有，并且这两个页面可以跳转。如果对于常规的多页快应用形式，可以在前页和后页的生命周期中获取当前播放的歌曲信息，然后刷新页面那首歌的状态显示。但是笔者上一篇文章《一个一线前端攻城狮的快应用开发之路：2、我与WebView的斗智斗勇》juejin.im/post/5c3af8…说到目前快应用已整体修改为单页形式，部分生命周期已失效，如onShow，那么音频播放状态同步就需要修改一下写法：
1、各页面/各组件点击了播放歌曲
↓
2、调用全局封装的audio函数，audio函数控制audio组件播放
↓
3、this.$dispatch通知Container.ux更新全局的歌曲播放信息
↓
4、Container.ux更新全局的歌曲播放信息后向子组件发送通知this.$broadcast
↓
5、子组件收到通知后，获取最新的播放信息并更新页面显示

除了使用$dispatch和$broadcast之外，也可以使用new Broadcast()的写法，直接通知所有组件(页面)，各个组件再根据参数刷新当前组件的显示状态。

（4）、全局的底部小播放器

基于之前文章分享的快应用单页模式，实现全局的底部小播放器就变得十分容易，因为所有页面都装在Container.ux这个容器内，小播放器也可以封装为一个组件，放在Container.ux中，使用（3）中提到通信方式，实现跨页面无刷新的小播放器，并且在小播放器上进行的操作，也会自动同步到各个页面上。

三、总结

总的来说，笔者还是更多地想分享一些开发的思路，而不是直接发一大段代码，很多时候方案很重要，不要立马动手做，想清楚后再开始实施，就不至于盖楼盖了一半发现图纸不对，要重新返工。
另外，关于audio，可能上述折腾这些东西在后续版本中会有更好的方案、又或者存在很多我还没发现的问题，都希望大家不吝指正~