微信小程序媒体组件（一)音频

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

1 .音频属性（自行去微信官方文档中了解)

2.一起看一下audio.wxml

音频id='myAudio '海报=“{ {海报}}”名称=“{ { name } }”作者=' { { author } } ' src=' { { src } } bind play=' bind play ' bind pause=' bind pause ' bind end=' bind error ' bindTimeUpdate=' bindTimeUpdate ' controls loopaudio button type=' primary ' class=' audio button ' bind tap=' audio play '播放按钮按钮类型='主' class='音频按钮' bind tap='音频暂停'暂停按钮按钮类型=“主”类=“音频按钮”绑定点击='音频14 '设置当前播放时间为14秒按钮按钮类型='主' class='音频按钮' bind tap='音频开始'回到开头按钮id为声音的组件的唯一标识，在射流研究…中通过该身份证明(识别)获取声音的上下文语境

这个。音频CTX=wx。创建音频上下文(' MyAudio ')海报、姓名、作者、src为声音的资源，详见属性表绑定播放、绑定暂停、绑定结束监听声音的的播放、暂停和结束，在射流研究…中进行实现

bindPlay:函数(){//监听音乐开始/继续播放控制台。日志(' this。数据。'姓名'继续播放)}，bindPause:函数(){//监听音乐暂停控制台。日志(' this。数据。'姓名'暂停播放)}，bindEnd:函数(){//监听音乐播放结束控制台。日志(' this。数据。'姓名'结束播放)}，binderror监听声音的的错误

bindError:函数（错误){//监听错误，错误信息错误。细节。errmsg控制台。日志(错误。细节。errmsg)}，其中errMsg有四种返回错误码描述MEDIAERRABORTED获取资源被用户禁止MEDIAERRNETWORD网络错误MEDIAERRDECODE解码错误MEDIAERRSRCNOTSUPPOERTED不合适资源我将模拟器设置为脱机的触发了“MEDIAERRSRCNOTSUPPOERTED”，暂未触发成功过其他错误bindtimeupdate。监听播放时间的变化，单位为s

bindtimeupdate :函数(超时

date){ 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 对象的方法列表：方法 参数 说明setSrc src 音频的地址play 无 播放pause 无 暂停seek position 跳转到指定位置，单位 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的部分就记录到这里啦