一、audio標籤

audio為小程式中的音訊元件，我們可以輕鬆的在小程式中播放音訊。

• 下面是元件的相關屬性的說明

備註：loop和controls屬性的值儘管是boolean，但是需要加{{}}才是生效，而id則不需要，這是小程式的設計bug

二、audio對應的api

前面我們介紹了一下audio標籤的屬性及事件監聽，那麼用這些屬效能夠實現我們正常的音訊操作呢？顯然是不行的，要進行音訊操作就需要使用到微信小程式給audio提供的對應的api了。下面我們來看看都有哪些常用的api吧。

第一步：我們要獲取到audio的上下文對相關，就像canvas的使用一樣哦。

this.audioContext = wx.createAudioContext('audio');//引數就是audio屬性的id值

audioContext 通過 audioId 跟一個 元件繫結，通過它可以操作對應的 元件,這樣我們就可以通過這個物件操作音訊了。

第二步：對應的操作方法

1. play()：播放；
2. pause()：暫停；
3. seek(postion)：設定當前播放位置點，postion的單位是s；
4. setSrc(src)：設定要播放的音訊地址；

以上就是audio音訊元件的常用屬性以及常用api了。下面我們將用這些屬性方法，做一個簡單的音訊播放。

三、音訊播放小案例

需求：

1. 能夠正常開始暫停播放；
2. 迴圈播放；
3. 快進暫停；

//對應的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不能動態設定。等後面找到解決方案了在補充吧。