十：audio 音频

Posted 2020-08-20 淡定君

属性名	类型	默认值	说明
id	String		video 组件的唯一标识符
src	String		要播放音频的资源地址
loop	Boolean	false	是否循环播放
controls	Boolean	true	是否显示默认控件
poster	String		默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name	String	未知音频	默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author	String	未知作者	默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
binderror	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
bindplay	EventHandle		当开始/继续播放时触发play事件
bindpause	EventHandle		当暂停播放时触发 pause 事件
bindtimeupdate	EventHandle		当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
bindended	EventHandle		当播放到末尾时触发 ended 事件

这是标签audio的一些属性。。如果当。audio出现错误的时候 如 binderror:function(e){}这个方法时 e.detail.errMsg会报如下错误。

返回错误码	描述
MEDIA_ERR_ABORTED	获取资源被用户禁止
MEDIA_ERR_NETWORD	网络错误
MEDIA_ERR_DECODE	解码错误
MEDIA_ERR_SRC_NOT_SUPPOERTED	不合适资源

例外 audio 还有一个是 action 属性，这个属性接受的参数 是一个object类型。他有两个值是：method 和 data 

method	描述	data
play	播放
pause	暂停
setPlaybackRate	调整速度	倍速
setCurrentTime	设置当前时间	播放时间

另外audio还可可以创建并返回上下文的audioContext对象。。。前端的童鞋可以把他理解成 getElementById。

他的调用方法是  wx.createAudioContext(audioId) 他的方法则如下。

方法	参数	说明
play	无	播放
pause	无	暂停
seek	position(number)	跳转到指定位置，单位 s

/* ---page/test/test.wxml----*/   <audio  id="myAudio"          poster="{{poster}}"          name="{{name}}"          author="{{author}}"          src="{{src}}"           controls loop         bindplay="audiobindplay"         bindpause="audiobindpause"         bindtimeupdate="audiobindtimeupdate"         bindended="audiobindended"         binderror="audiobinderror"></audio>   <button type="primary" bindtap="audioPlay">播放</button> <button type="primary" bindtap="audioPause">暂停</button> <button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>   /* ---page/test/test.wxml----*/

/* ---page/test/test.js----*/   // audio.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‘,   },   //以下是 js的api   audioPlay: function () {     this.audioCtx.play()   },   audioPause: function () {     this.audioCtx.pause()   },   audio14: function () {     this.audioCtx.seek(14)   },   //以下是audio的属性。   audiobindplay:function(e){     console.log("音频开始播放")   },   audiobindpause:function(e){     console.log("音频暂停中")   },   audiobindtimeupdate:function(e){     console.log("修改了当前的播放时间。")   },   audiobindended:function(e){     console.log("音频播放结束")   },   audiobinderror:function(e){     console.log("音频出错了。\n",e.detail.errMsg)   } })   /* ---page/test/test.js----*/

那么主要注意的是  audiobindtimeupdate 这个方法 他并不是用户修改了当前播放时间才执行，而是音乐在播放的时候他都会执行N次。具体执行一下就好了。