基于apicloud原生模块实现的凌乱的单点音频播放凌乱功能总结

关于做者

程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是永不停息的追求。

我的网站：https://www.linganmin.cn

最近刚写了一个手机在线播放的H5电影站：http://www.ifilm.ltd

---

原因：公司项目使用APIcloud开发混合式app，用到了APIcloud官方提供的audio原生音频播放模块来作单点音频播放功能。单点的意思是全部播放状态交由首页处理，播放页面更改对应播放的item状态便可。因我的感受凌乱，在老大指引下使用事件和事件监听完成之，遂总结记录之。

附上完成后的效果图:

• 备注：因须要改变播放页的状态，在播放页的监听器中须要传递当前页面的数据，并在监听器中进行遍历，判断，修改。否则没法完成修改当前播放状态操做。

1. 给当前页面展现的post和相关post使用Vue增长播放所需的状态，进度等属性

2. 点击播放，判断当前post是否正在播放，如果则执行暂停事件，若不是则执行播放事件

3. 首页（index.html）始终进行播放事件监听。
   当捕获到播放事件，开始判断当前将要播放的和当前播放的是否是同一个post，若是不是则将执行中止播放事件去停掉当前正在播放的post，而后开始播放将要播放的post。

播放语音的回调函数中执行设置播放状态事件，并将播放过程获取到的音频长度。当前播放位置等参数传递给该事件，供该事件监听器使用。

1. 首页和播放页始终进行暂停事件监听 。【两个监听器】
   当首页捕获到暂停事件，则进行音频暂停操做(audio.pause);

当播放页捕获到暂停事件，则将当前正在播放的post的状态改成暂停

1. 首页和播放页始终进行中止播放事件监听。【两个监听器】
   当首页捕获到中止播放事件，则进行音频中止播放操做(audio.stop);

当播放页捕获到中止播放事件，则将当前正在播放的post状态改成未播放，播放进度等置空

1. 播放页始终进行设置播放状态事件监听。
   当播放页捕获到设置播放状态事件，则获取事件传递的数据，实时改变播放页面的状态

2. 设置播放进度（经过拖动播放进度条）事件由当前播放页触发，出发后将progress的值传递到首页的设置播放进度监听器使用，经过该值设置播放位置