微信小程序播放本地音乐怎么开发和使用?
很多年轻人都喜欢用手机听音乐,所以经常会下载不同类型的播放音乐的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: 'y.gtimg/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'ws.stream.qqmusic.qq/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了,一个小程序就可以实现相应的功能,而且还不占内存,即用即关。怎么样,是不是觉得很方便呢?想要尝试一下的话,大家可以对照上述流程进行开发哦。更多相关资料请在微信小程序商店搜索。
微信小程序之录音播放功能上传
如何实现微信小程序录音在另外的界面播放
微信小程序API音频播放控制