微信小程序组件：audio及api

一、audio标签

audio为小程序中的音频组件，我们可以轻松的在小程序中播放音频。

下面是组件的相关属性的说明

属性	类型	默认值	说明
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 事件

备注：loop和controls属性的值尽管是boolean，但是需要加{{}}才是生效，而id则不需要，这是小程序的设计bug

二、audio对应的api

前面我们介绍了一下audio标签的属性及事件监听，那么用这些属性能够实现我们正常的音频操作呢？显然是不行的，要进行音频操作就需要使用到微信小程序给audio提供的对应的api了。下面我们来看看都有哪些常用的api吧。

第一步：我们要获取到audio的上下文对相关，就像canvas的使用一样哦。

this.audioContext = wx.createAudioContext('audio');//参数就是audio属性的id值

audioContext 通过 audioId 跟一个组件绑定，通过它可以操作对应的组件,这样我们就可以通过这个对象操作音频了。

第二步：对应的操作方法

play()：播放；
pause()：暂停；
seek(postion)：设置当前播放位置点，postion的单位是s；
setSrc(src)：设置要播放的音频地址；

以上就是audio音频组件的常用属性以及常用api了。下面我们将用这些属性方法，做一个简单的音频播放。

三、音频播放小案例

需求：

能够正常开始暂停播放；
循环播放；
快进暂停；

//对应的audio.js
Page({
  data:{
    audioContext:'', 
    audio:{
        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=4',
        currentTime:0,
        currtRate:0

    }
  },
  //以下是状态监听
  audioError:function(resp){
      console.log(resp);
  },
  audioPlay:function(resp){
      console.log(resp);
      console.log('开始播放');
  },
  playEnd:function(resp){
      console.log(resp);
      console.log('播放结束');
  },
  timeUpdate:function(resp){
      this.setData({
          currtRate:(100*resp.detail.currentTime/resp.detail.duration)
      });//总时长
      this.currentTime = resp.detail.currentTime;//当前时长
      console.log(resp);
      console.log('播放进度变化');
  },
  //以下是操作
  play:function(){
      this.audioContext.play();
  },
  pause:function(){
      this.audioContext.pause();
  },
  goFast:function(){
      this.audioContext.seek(this.currentTime+20);
  },
  onLoad:function(options){
    // 生命周期函数--监听页面加载
    this.audioContext=wx.createAudioContext('audio');

  },
  onShareAppMessage: function() {
    // 用户点击右上角分享
    return {
      title: 'title', // 分享标题
      desc: 'desc', // 分享描述
      path: 'path' // 分享路径
    }
  }
})

//对应的audio.wxml
<view class="title text-center">
  audio音频组件示例</view>
<view class="text-center">
  <audio id="audio" src="{{audio.src}}" loop="{{true}}" controls="{{true}}" poster="{{audio.poster}}" name="{{audio.name}}" author="{{audio.author}}" binderror="audioError" bindplay="audioPlay" bindeneded="playEnd" bindtimeupdate="timeUpdate"></audio>
</view>
<view class="row">
  <button class="col" type="primary" size="mini" bindtap="play">播放</button>
  <button class="col" type="primary" size="mini" bindtap="pause">暂停</button>
  <button class="col" type="primary" size="mini" bindtap="goFast">快进</button>
</view>

本来想搞个播放进度条展示到下面的，可是发现slider的value不能动态设置。等后面找到解决方案了在补充吧。

微信小程序组件：audio及api

一、audio标签

二、audio对应的api

三、音频播放小案例

猜你喜欢