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

本文作者：XiaoTian

本文章共分3期发出，这是最后一篇啦，后面还有更多作者的分享，欢迎大家持续关注哦~

 

一、场景

 

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

 

二、Audio的问题及解决方案

 

（1）切歌

 

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

 

 

 

 

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

 

首先需要全局存储当前播放的歌曲id、播放状态等信息，各个页面或组件可以对比状态显示不同的图标。

当audio组件被赋值一个新的音频src，流程大概是：
onplay > onl