关于作者
程序开发人员,不拘泥于语言与技术,目前主要从事PHP和前端开发,使用Laravel和VueJs,App端使用Apicloud混合式开发。合适和够用是永不停息的追求。
最近刚写了一个手机在线播放的H5电影站:http://www.ifilm.ltd
缘由:公司项目使用APIcloud开发混合式app,用到了APIcloud官方提供的
audio
原生音频播放模块来做单点
音频播放功能。单点的意思是所有播放状态交由首页处理,播放页面更改对应播放的item状态即可。因个人感觉凌乱,在老大指引下使用事件和事件监听完成之,遂总结记录之。
附上完成后的效果图:
备注:因需要改变播放页的状态,在播放页的监听器中需要传递当前页面的数据,并在监听器中进行遍历,判断,修改。不然无法完成修改当前播放状态操作。
给当前页面展示的post和相关post使用Vue增加播放所需的状态,进度等属性
点击播放,判断当前post是否正在播放,若是则执行暂停事件,若不是则执行播放事件
首页(index.html)始终进行播放事件监听。
当捕获到播放事件,开始判断当前将要播放的和当前播放的是不是同一个post,如果不是则将执行停止播放事件去停掉当前正在播放的post,然后开始播放将要播放的post。
播放语音的回调函数中执行设置播放状态事件,并将播放过程获取到的音频长度。当前播放位置等参数传递给该事件,供该事件监听器使用。
首页和播放页始终进行暂停事件监听 。【两个监听器】
当首页捕获到暂停事件,则进行音频暂停操作(audio.pause);
当播放页捕获到暂停事件,则将当前正在播放的post的状态改为暂停
首页和播放页始终进行停止播放事件监听。【两个监听器】
当首页捕获到停止播放事件,则进行音频停止播放操作(audio.stop);
当播放页捕获到停止播放事件,则将当前正在播放的post状态改为未播放,播放进度等置空
播放页始终进行设置播放状态事件监听。
当播放页捕获到设置播放状态事件,则获取事件传递的数据,实时改变播放页面的状态设置播放进度(通过拖动播放进度条)事件由当前播放页触发,出发后将progress的值传递到首页的设置播放进度监听器使用,通过该值设置播放位置
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。