微信小程序全局音频播放,实现分析
1. 需求分析
育儿柚道小程序中有针对育儿教育提供的音频课程,主要包含读书、读文的音频内容。
1.1 功能需求
- 课程音频:包含课程音频的地方有三处
- 课程卡片,包含在 scrollview 中的试听内容;
音乐卡片
课程详情页的课程章节列表;
课程详情页
底部与导航 tab 结合的播放控件
Player bar
音频管理:
1)单击课程卡片上的音频,播放并触发底部播放控件,显示播放状态
2)进入课程详情页时,单击列表内容播放单条内容,点击主播放按钮,连续播放列表中的内容
3)底层导航的播放控件播放音频音频控件,有两处音频控件。
1)底部导航音频控件,支持【下一首/暂停/播放】
2)详情页中,支持【拖动进度/暂停/播放】全局播放:离开小程序后,微信聊天页顶部显示当前播放的音频
图片.png
1.2 系统分析与设计
综上述的需求,分析出我们的系统需求,
- 音频播放列表维护
- 音频播放控制管理
小程序中对于音频播放有两种
- 音频播放控件 audio
- 全局唯一背景音频管理器
由于我们的需求中需要对音频做全局管理,所以选型微信提供的:
backgroundAudioManager
我们用到的属性和方法如下:
音乐播放器的组成
图片.png
将播放器的产品组成分为三层,
- 组件层主要处理 UI、交互、数据展现
- 播放控制层,用于管理整体播放控制
- 事件处理层,监听处理全局系统中的音频事件,播放、暂停、停止和播放进度监听
播放器组件
图片.png
播放器控制
图片.png
先看一下我们用到的控制方法和微信音频播放对应的 api
用到的 api 如下
wx.playBackgroundAudio(OBJECT)
使用后台播放器播放音乐,对于微信客户端来说,只能同时有一个后台音乐在播放。wx.pauseBackgroundAudio()
暂停播放音乐。wx.seekBackgroundAudio(OBJECT)
控制音乐播放进度wx.stopBackgroundAudio()
停止播放音乐。wx.onBackgroundAudioPlay(CALLBACK)监听音乐播放。
wx.onBackgroundAudioPause(CALLBACK)监听音乐暂停。
wx.onBackgroundAudioStop(CALLBACK)
监听音乐停止。
onLauch 监听
作者:佰晟
链接:https://www.jianshu.com/p/407f551942e2
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
微信小程序全局音频播放,实现分析相关推荐
- 微信小程序全局音频设置,手机上播放不了音频的问题解决方案,微信小程序音频无法播放问题.
微信小程序设置全局音频: 微信小程序目前已经不支持audio组件的使用, 只能使用wx.createInnerAudioContext 接口. 具体操作如下 app.js文件的设置 // app.js ...
- 微信小程序录音+音频播放(解决ios无法音频播放问题)
微信小程序录音+播放 1.创建全局变量 const audioManager = wx.getRecorderManager(): const innerAudioContext = wx.creat ...
- 微信小程序html5音频,微信小程序 audio音频播放详解及实例
loop:是否循环播放 id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象. bindplay:播放时触发该事件 b ...
- 微信小程序:音频播放器
由于产品需求,需要做一个自定义音频播放器,现在也差不多做完了,接下来呢,给大家分享一下,大家先来看看效果图哦~ 这里呢,我选择的是 wx.createInnerAudioContext 这个方法,大家 ...
- 简单实现微信小程序音乐音频播放的功能
效果图: 1)获取歌曲详情页的数据 从每日推荐列表点击各歌曲跳转到歌曲详情页的时候,需要携带歌曲的id,在路由中把歌曲的id传到歌曲详情页的页面中使用(在wxml文件中通过data-id的形式把id传 ...
- 微信小程序实现音频播放
废话不多说直接上代码,亲测可用 Page({data: {isPlay: false,},onLoad() {this.audioPlay()},//创建语音示例进行播放createAudio(e) ...
- 微信小程序实现音频播放,带有点击上一首和下一首的功能
1.注册音频的Api const innerAudioContext = wx.createInnerAudioContext(); 2.需要用到数据 exhibitList: [], //资源列表a ...
- 微信小程序简易音频播放器(wx.getBackgroundAudioManager())
开发工具:微信开发者工具 源代码(百度网盘:)链接: 提取码:ldb9 注意:如果点击播放没反应,或者爆红,则需要更换js中的视频地址 第一步.首先要在app.json里设置: "requi ...
- 微信小程序实现音乐播放器(3)(使用全局数据实现数据共享)
文章目录 前情提要 搭建静态资源服务器 小程序项目 app.json app.js app.wxss pages/index/index.json pages/index/index.wxml pag ...
最新文章
- html5 漂亮的左右布局_欧式带小院10X16米,适合农村建房,比别墅还漂亮
- 【撸码师登云梯】google
- python图片处理裁剪大小、旋转、镜像
- cmake编译mysql常用参数
- 查看线程CPU利用率
- 简述tcp协议的可靠性有哪些机制_腾讯面试HTTP与TCP/IP20连问,你能答出多少?
- 机器学习之实战matlab神经网络工具箱
- 教程 参数设置_AI全自动剪辑软件安装教程,参数设置与使用注意事项
- 受美国法律保护美国妞_为什么美国法律有效地要求所有软件设计都要响应
- 全景视频/VR的全流程处理解析-文献资料整理归纳
- 大道至简(原标题:少是指数级的多)
- 微信公众平台开发【发送消息】被动回复消息
- 笔记本也瑜枷,联想展示最新概念机
- php 热敏打印,从PHP打印到POS打印机
- PHP 加密、解密工具Zend Guard和ionCube
- 燕十八 mysql 复习_燕十八 Mysql 笔记 68 课
- IC学习笔记20——VCS的使用(二)VCS仿真基础知识
- 小孩学python有意义吗-让中小学生学习编程有什么意义
- 计算机丢失slimage.dll,slimage.dll
- DirectX教程(6):初始化Direct3D
热门文章
- 鸿蒙方将拊脾雀跃而游拼音,鸿蒙
- 数据可视化|用帕累托图进行数据分析
- 山西省可提取住房公积金支付物业费?
- EasyExcel写入多个sheet,每个sheet写多个表
- 齐岳(ppz)2Ir(4-tfmBTZ)铱金属配合物红色磷光定制材料
- Django ORM – 多表实例
- 手串(暴力) - 今日头条2018校园招聘后端方向(9.10)
- 今日头条2018校园春季招聘研发岗位笔试(第一场)经验
- 小米手机liveplayer安装包_NBA LIVE小米版下载
- 新神魔大陆服务器现在在维护吗,【新神魔大陆攻略】12月11日合服维护公告(详细教程)...