关于作者

顺序开辟人员，不拘泥于言语与手艺，现在重要处置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的值通报到首页的设置播放进度监听器运用，经由过程该值设置播放位置