
微信小程序播放本地音乐怎么开发和使用?
很多年轻人都喜欢用手机听音乐,所以经常会下载不同类型的播放音乐的App,这一类App多了就会很占内存,这时候,小程序特点不占内存就起到作用了。大家可以试着使用微信小程序播放本地音乐,毕竟微信小程序播放本地音乐既可以满足大家的需求,又让使用过程更加简单便捷。那么微信小程序播放本地音乐怎么设置呢?
小程序音频组件属性如下:
属性名类型默认值说明
idString video 组件的唯一标识符,
srcString 要播放音频的资源地址
loopBooleanfalse是否循环播放
controlsBooleantrue是否显示默认控件
posterString 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
nameString未知音频默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
authorString未知作者默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
binderrorEventHandle 当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}
bindplayEventHandle 当开始/继续播放时触发play事件
bindpauseEventHandle 当暂停播放时触发 pause 事件
bindtimeupdateEventHandle 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
bindendedEventHandle 当播放到末尾时触发 ended 事件
错误返回码:MediaError.code
如果有小程序返回错误码怎么办:
MEDIA_ERR_ABORTED获取资源被用户禁止
MEDIA_ERR_NETWORD网络错误
MEDIA_ERR_DECODE解码错误
MEDIA_ERR_SRC_NOT_SUPPOERTED不合适资源
wx.createAudioContext(audioId)
创建并返回audio上下文audioContext对象,控制音频的播放暂停与小程序跳转。
方法参数说明
play无播放
pause无暂停
seekposition跳转到指定位置,单位 s
wxml
播放
暂停
设置当前播放时间为14秒
回到开头
js
Page({
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
},
data: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},
audioPlay: function () {
this.audioCtx.play()
},
audioPause: function () {
this.audioCtx.pause()
},
audio14: function () {
this.audioCtx.seek(14)
},
audioStart: function () {
this.audioCtx.seek(0)
},
funplay: function(){
console.log("audio play");
},
funpause: function(){
console.log("audio pause");
},
funtimeupdate: function(u){
console.log(u.detail.currentTime);
console.log(u.detail.duration);
},
funended: function(){
console.log("audio end");
},
funerror: function(u){
console.log(u.detail.errMsg);
}
})
微信小程序播放本地音乐设置成功之后,大家就不用在手机上下载那么多播放音乐的App了,一个小程序就可以实现相应的功能,而且还不占内存,即用即关。怎么样,是不是觉得很方便呢?想要尝试一下的话,大家可以对照上述流程进行开发哦。更多相关资料请在微信小程序商店搜索。