关于作者

程序开发人员，不拘泥于语言与技术，目前主要从事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的值传递到首页的设置播放进度监听器使用，通过该值设置播放位置