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

shery 发布于2019-08-20 17:34 / 3217人阅读

摘要：个人网站最近刚写了一个手机在线播放的电影站缘由公司项目使用开发混合式，用到了官方提供的原生音频播放模块来做单点音频播放功能。首页和播放页始终进行暂停事件监听。

关于作者

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

个人网站：https://www.linganmin.cn

最近刚写了一个手机在线播放的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的值传递到首页的设置播放进度监听器使用，通过该值设置播放位置

idc机房托管服务器托管 js代码凌乱 webrtc的音频模块基于webrtc的电话回声消除的研究与实现 webrtc实现自己的音频采集

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83682.html

你不知道的h5

摘要：目前，常用的模块规范主要有两种和。拦截全局请求一直接引入脚本拦截需要的回调或函数。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。基于 Three.js 的超快的 3D 开发框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 应用 3D 开发框架。它为普通的 Three.js 任务提供封装、使搭建环境、...

li21 2019-08-05 12:32 评论0 收藏0
你不知道的h5

摘要：目前，常用的模块规范主要有两种和。拦截全局请求一直接引入脚本拦截需要的回调或函数。深刻知道一个良好的命名规范的重要性，同时在项目中也会遇到一些命名的瓶颈。基于 Three.js 的超快的 3D 开发框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 应用 3D 开发框架。它为普通的 Three.js 任务提供封装、使搭建环境、...

IntMain 2019-08-21 17:57 评论0 收藏0
vPlayer 模块Demo

摘要：本文出自官方论坛封装了视频播放功能支持音频播放。本模块封装了两套播放方案一，通过调用接口，直接打开一个自带默认播放界面的播放器二，通过接口，打开一个纯播放器界面，再配合自定义完整的播放页面，通过等接口控制播放操作。本文出自APICloud官方论坛 vPlayer iOS封装了AVPlayer视频播放功能（支持音频播放）。iOS 平台上支持的视频文件格式有：WMV，AVI，MKV，RM...

WrBug 2019-08-26 14:04 评论0 收藏0
模块化

摘要：模块化总结最近重新复习的模块化的相关知识，总结一下，仅供自己理解和大家参考。模块化的优点可维护性根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。模块化总结最近重新复习的模块化的相关知识，总结一下，仅供自己理解和大家参考。模块化的优点可维护性：根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立...

?xiaoxiao, 2019-08-20 17:45 评论0 收藏0
APICLOUD 初识

摘要：它包括一些完整的站点，站点的专门功能以及在或上的信息处理应用。由于性能的致命问题已经被很多平台所不待见，是和的桥梁，一个好的人员既要懂得一部分的知识，又需要接触的知识。而且需要把控选择两者对接过度的技术选择。所以是一个知识比较广的学习路线。 Android简介序言 IT技术栈更新换代很快，关于安卓移动端2015年还是Android 5.1横行，如今到了2018年都已经Android ...

张巨伟 2019-06-25 12:23 评论0 收藏0