1

关于作者

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


安小下同学
3.2k 声望1.9k 粉丝

正直、坦诚