微信小程序媒体组件（一）audio

周四没有课，写个博客庆祝一下

今天记录一下audio的基本使用，首先看下效果图。（声音请脑补一下~）

1.介绍一下audio属性（来自微信官方文档）

属性名类型默认值说明idString
audio 组件的唯一标识符srcString
要播放音频的资源地址loopBooleanfalse是否循环播放controlsBooleanfalse是否显示默认控件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 事件2.一起看一下 audio.wxml

<!--pages/audio/audio.wxml--><audio id="myAudio" poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}"  bindplay="bindPlay" bindpause='bindPause' bindended='bindEnd' binderror='bindError' bindtimeupdate='bindTimeUpdate' controls loop></audio><button type="primary" class="audioButton" bindtap="audioPlay">播放</button><button type="primary" class="audioButton" bindtap="audioPause">暂停</button><button type="primary" class="audioButton" bindtap="audio14">设置当前播放时间为14秒</button><button type="primary" class="audioButton" bindtap="audioStart">回到开头</button>

 

①id为audio组件的唯一标识，在js中通过该id获取audio上下文context

this.audioCtx = wx.createAudioContext('myAudio')

②poster、name、author、src为audio资源，详见属性表

③bindplay、bindpause、bindended监听audio的播放、暂停和结束，在js中进行实现

bindPlay: function () {//监听音乐开始/继续播放    console.log("<" + this.data.name + '>继续播放')  },  bindPause: function () {//监听音乐暂停    console.log("<" + this.data.name + '>暂停播放')  },  bindEnd: function () {//监听音乐播放结束    console.log("<" + this.data.name + '>结束播放')  },

④binderror监听audio的错误

bindError: function (error) {//监听错误，错误信息error.detail.errMsg    console.log(error.detail.errMsg)  },

其中errMsg有四种

返回错误码描述MEDIA_ERR_ABORTED获取资源被用户禁止MEDIA_ERR_NETWORD网络错误MEDIA_ERR_DECODE解码错误MEDIA_ERR_SRC_NOT_SUPPOERTED不合适资源我将模拟器设置为offline触发了“MEDIA_ERR_SRC_NOT_SUPPOERTED”，暂未触发成功过其他错误。

⑤bindtimeupdate监听播放时间的变化，单位为s

bindTimeUpdate:function(timeupdate){    console.log("当前播放位置："+timeupdate.detail.currentTime+"s")  },

⑥loop为true则音乐自动循环播放

⑦controls控制播放窗口（红色框内部分）的可见性↓

2.完整的js代码↓

Page({  onReady: function (e) {    // 使用 wx.createAudioContext 获取 audio 上下文 context    this.audioCtx = wx.createAudioContext('myAudio')  },  data: {    // poster: '../../resources/image/隔壁团.jpg',    // name: '夏天海边',    // author: '隔壁团乐队',    // src: '../../resources/audio/夏天海边.mp3',    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',    name: '此时此刻',    author: '许巍'  },  bindPlay: function () {//监听音乐开始/继续播放    console.log("<" + this.data.name + '>继续播放')  },  bindPause: function () {//监听音乐暂停    console.log("<" + this.data.name + '>暂停播放')  },  bindEnd: function () {//监听音乐播放结束    console.log("<" + this.data.name + '>结束播放')  },  bindError: function (error) {//监听错误，错误信息error.detail.errMsg    console.log("=================================")    console.log(error.detail.errMsg)    console.log("=================================")  },  bindTimeUpdate:function(timeupdate){    console.log("当前播放位置："+timeupdate.detail.currentTime+"s")  },  audioPlay: function () {//点击“播放”触发    this.audioCtx.play()  },  audioPause: function () {//点击“暂停”触发    this.audioCtx.pause()  },  audio14: function () {//设置当前播放时间为14秒，seek单位为s    this.audioCtx.seek(14)  },  audioStart: function () {    this.audioCtx.seek(0)  }})

audioContext 对象的方法列表：

方法参数说明setSrcsrc音频的地址play无播放pause无暂停seekposition跳转到指定位置，单位 s
3.wxss样式文件↓

/* pages/audio/audio.wxss */.audioButton{  margin-left: 20px;  margin-right: 20px;  margin-top: 20px;}

4.上面给出的js源码中使用了网络资源，我们也可以使用本地资源。建立一个与pages同级的资源文件夹。目录结构如下↓（但是需要注意，微信小程序有大小限制。太大资源会无法在实体机上预览）

使用本地资源后，其他功能都不受影响，但是seek（14）有bug，每次都是从头开始播放。不知道是不是小程序的bug。今天关于audio的部分就记录到这里啦~