关灯
首页
论坛首页
大咖专栏
大咖专栏
热点资讯
热点资讯
精彩活动
精彩活动
关于
关于
本版
文章
帖子
用户
登录
注册
快捷登录
投稿
EOIT论坛
›
社区交流
›
WEB前端
›
微信小程序-音乐播放器详解
返回列表
微信小程序-音乐播放器详解
[复制链接]
油腻大叔
发表于 2018-7-13 22:05:53
|
显示全部楼层
|
阅读模式
本帖最后由 油腻大叔 于 2018-7-13 22:05 编辑
大家好,上一篇分享了如何获取酷狗的音乐资源,今天给大家聊一下微信小程序中音乐播放器的制作。
微信小程序中关于音频方面的东西很多,但是因为版本的关系,很多组件和接口已经不维护了。
今天给大家讲解的是官方最新维护的
wx.createInnerAudioContext()接口,也是现在小程序中功能最全的接口。
详细文档还请查看官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/createInnerAudioContext.html
在这里就不说文档了,主要根据常见功能把涉及到的知识点和易错点给大家介绍一下。
1、如何声明一个微信audio对象
const audio =
wx.createInnerAudioContext();
注:如果你的播放器比较复杂,有许多功能,建议把对象放在data中方便维护。
data:{
audio:null
}
在onload的时候,或者适当的时候初始化;
this.setData({
audio:
wx.createInnerAudioContext()
})
2、进度条功能
进度条设计可以用到小程序中的组件progress,可以通过percent属性来控制进度条的百分比。
百分比=当前的时间/歌曲总时间*100
当前的时间:
currentTime属性
歌曲总时间
:
duration属性
3、可以拖拽进度条改变歌曲进度的功能
如果想要让进度条可以拖拽,并且改变歌曲的进度可以利用组件movable-area
movable-area组件使用:
horizontal 横方向拖拽
<movable-area style="width:100%">
<movable-view direction="horizontal">
</movable-view>
</movable-area>
可拖动滑块在拖动的时候,想让进度条进度发生改变做法如下:
当拖动的时候:百分比=拖动的X值/
movable-area组件的宽度*100
拖动进度条的时候想让歌曲也改变进度需要用到
seek(制定位置的时间,单位秒)方法
this.data.audio.seek(
歌曲总时间*(进度条的百分比值/100)
)
4
、
播放循序功能
播放方式一般包括顺序播放,单曲循环,随机播放,这些模式主要就是在一首歌曲播放完毕后选择适当歌曲
主要介绍的函数为:
onEnded,大家需要在这个函数中完成不同方式的播放
5、 音量功能
在小程序之前是没有音量控制功能,音量的变化主要是通过手机的音量键来控制的。1.9.0的新版本增加了
volume属性
在使用的时候需要注意的是:
volume属性的范围值为0-1,大家在控制音量增大或者减小的时候不能用
volume++或者
volume--应该是
volume+=0.1或者
volume-=0.1,还有一个问题就是大叔在测试的时候pc端每次音量发生改变,歌曲都会从新播放,但是在手机上不会出现
6、
加载数据不足和加载失败
onWaiting事件,
音频加载中事件,当音频因为数据不足,需要停下来加载时会触发
offError事件,当程序发生错误的时候会触发
this.data.audio.onError((res)=>{
console.log(res.errMsg) //错误信息
console.log(res.errCode)//错误代码
})
这两事件也是在小程序中不可缺少的哦。
分享就到这里,觉得有用的可以点赞,关注我哦,也欢迎留言吐槽,也可以添加QQ群详细讨论:622730703
回复
举报
精彩评论
2
正序浏览
敏宸羽
发表于 2018-9-16 21:02:36
|
显示全部楼层
高人啊,真是好东西啊!!
精品软件:
www.kubuku.net
回复
支持
反对
举报
小川
发表于 2018-9-17 08:15:27
|
显示全部楼层
沙发沙发
回复
举报
还有一些帖子被系统自动隐藏,点此展开
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
最佳新人
注册账号后积极发帖的会员
活跃会员
经常参与各类话题的讨论,发帖内容较有主见
油腻大叔
版主
最佳新人
注册账号后积极发帖的会员
活跃会员
经常参与各类话题的讨论,发帖内容较有主见
0
关注
24
粉丝
29
帖子
发送私信
收听TA
Ta的主页
热门图文
百杰184开班了!~~~
微信小程序插件系列(一)日历插件
中国平安产品经理和app开发打架视频事件始
国信安教育百杰☆☆☆就业信息☆☆☆
常见的js设计模式,面试必备
如何有效的学习Web前端开发?
热门帖子
新手报到
报道贴
新手报到
百杰184开班了!~~~
WEB前端
微信小程序插件系列(一)日历插件
新手报到
中国平安产品经理和app开发打架视频事件始
WEB前端
常见的js设计模式,面试必备
WEB前端
如何有效的学习Web前端开发?
WEB前端
微信小程序-音乐播放器详解
新手报到
常用酷狗音乐资源接口
排行榜
日
周
月
1
百杰197开班啦!~~~
百杰197部开班啦!~~~ 方向:web
601
0
2
✿✿✿国信安教育百杰191部测试班级信息✿
✿✿✿国信安教育百杰191部测试班级信息✿✿✿ 班 级:百杰191部 专业方向:软件测
627
1
3
国信安教育百杰195部前端班
✿✿✿国信安教育百杰195部前端班级信息✿✿✿ 班 级:百杰w195部 专业方向:web
598
0
4
html中如何让文字竖排
在写网页时,为了让页面好看,可能会考虑使用竖排文字,在使用时发现不简单.第一种:原始
497
0
5
可查询每个时代流行配色组合的Color Leap
每个时代都有代表的文化和呈现样貌,如果对于一些绘画或摄影作品有研究,可能也会发现
427
0
6
设计页面单薄,如何提升质感?
质感是什么?如何让画面拥有更高端的质感?本文由质感的原理出发,深入分析质感表现所
551
0
7
面型图标vs线型图标,哪一种的用户体验会更
什么时候该用线型图标,什么时候该用面型图标,不知道大家平时有没有去思考过?我自己
393
0
8
193JAVA开班了
看过来,193的哥哥姐姐们。
618
0
9
js中 ECMAScript位运算符
ECMAScript位运算符: https://blog.csdn.net/qwlzxx/article/details/46669985 摘抄
561
0
10
UI布局中颜色的使用原理
色彩在GUI的交互中扮演着重要的角色。合理的使用颜色,能帮助用户快捷的发现界面中的
418
0
1
百杰184开班了!~~~
百杰184部WEB开班啦!~~~
9628
57
2
微信小程序插件系列(一)日历插件
近期有玩小程序的朋友问我在小程序中如何引用插件。那么近期就给大家推荐几款实用的微
9359
1
3
中国平安产品经理和app开发打架视频事件始
据爆料,中国平安一个产品经理和APP开发人员在办公室直接打起来了,据称是产品经理向A
7300
2
4
国信安教育百杰☆☆☆就业信息☆☆☆
国信安教育2018年学员就业信息展示——你也可以像他们一样拿高薪哦!!!
6709
16
5
常见的js设计模式,面试必备
每个JS开发者都力求写出可维护、复用性和可读性高的代码。随着应用不断扩大,代码组织
5727
19
6
如何有效的学习Web前端开发?
一个好的Web前端工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高
5396
8
7
微信小程序-音乐播放器详解
大家好,上一篇分享了如何获取酷狗的音乐资源,今天给大家聊一下微信小程序中音
5320
2
8
常用酷狗音乐资源接口
这几天在大学带小朋友们玩微信小程序,有的学生不知道如何获取到音乐资源,今天
4157
4
9
论坛攻略-----如何获得积分与安仔币、快速
国信安论坛——EOIT上线啦!!!赶快来玩转论坛,获取积分,领取礼品哟!!! 积分与
4149
0
10
如何从零开始学Java
虽然Java面象对象很多东西都是被封装好的直接用,相对其他语言没那么复杂,但是学的东
4071
1
1
百杰197开班啦!~~~
百杰197部开班啦!~~~ 方向:web
601
0
2
✿✿✿国信安教育百杰191部测试班级信息✿
✿✿✿国信安教育百杰191部测试班级信息✿✿✿ 班 级:百杰191部 专业方向:软件测
627
1
3
国信安教育百杰195部前端班
✿✿✿国信安教育百杰195部前端班级信息✿✿✿ 班 级:百杰w195部 专业方向:web
598
0
4
html中如何让文字竖排
在写网页时,为了让页面好看,可能会考虑使用竖排文字,在使用时发现不简单.第一种:原始
497
0
5
可查询每个时代流行配色组合的Color Leap
每个时代都有代表的文化和呈现样貌,如果对于一些绘画或摄影作品有研究,可能也会发现
427
0
6
设计页面单薄,如何提升质感?
质感是什么?如何让画面拥有更高端的质感?本文由质感的原理出发,深入分析质感表现所
551
0
7
面型图标vs线型图标,哪一种的用户体验会更
什么时候该用线型图标,什么时候该用面型图标,不知道大家平时有没有去思考过?我自己
393
0
8
193JAVA开班了
看过来,193的哥哥姐姐们。
618
0
9
js中 ECMAScript位运算符
ECMAScript位运算符: https://blog.csdn.net/qwlzxx/article/details/46669985 摘抄
561
0
10
UI布局中颜色的使用原理
色彩在GUI的交互中扮演着重要的角色。合理的使用颜色,能帮助用户快捷的发现界面中的
418
0
作者专栏
750
刘大阳
200
大菲
161
安仔
139
意大利炮
114
小川
84
丘丘
关闭
站长推荐
/1
论坛攻略-----如何获得积分与安仔币、快速升级
国信安论坛——EOIT上线啦!!!赶快来玩转论坛,获取积分,领取礼品哟!!!
查看 »
快速回复
返回顶部
返回列表