微信小程序：音频API

InnerAudioContext实例

播放音频所需要创建的实例，可通过 wx.createInnerAudioContext 接口获取这个实例。注意，音频播放过程中，可能被系统中断，可通过 wx.onAudioInterruptionBegin、wx.onAudioInterruptionEnd事件来处理这种情况

https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html

属性

string src

音频资源的地址，用于直接播放。2.2.3 开始支持云文件ID

number startTime

开始播放的位置（单位：s），默认为 0

number duration

当前音频的长度（单位 s）。只有在当前有合法的 src 时返回（只读）

number currentTime

当前音频的播放位置（单位 s）。只有在当前有合法的 src 时返回，时间保留小数点后 6 位（只读）

方法

InnerAudioContext.play()

播放

InnerAudioContext.pause()

暂停。暂停后的音频再播放会从暂停处开始播放

InnerAudioContext.stop()

停止。停止后的音频再播放会从头开始播放。

InnerAudioContext.seek(number position)

跳转到指定位置

实训步骤

数据

index.js:

 data: {
    src: 'https://downsc.chinaz.net/Files/DownLoad/sound1/201803/9825.mp3',
    poster: '/img/guonian2.jpg',
    name: '普通disco',
    author: '佚名',   
  },

预加载

index.js:

  audioData: null,
  onLoad: function (options) {
    this.audioData =wx.createInnerAudioContext()
    this.audioData.src = this.data.src
    this.audioData.autoplay = true
    console.log(this.audioData)

  },

功能按钮

<button bindtap='audioPlay'>播放</button>
<button bindtap='audioPause'>暂停</button>
<button bindtap='audioPlayBack'>回放测试</button>
<button bindtap='audioStop'>结束</button>
<button bindtap='audioStart'>回到开头</button>

index.wxss:

button{
  margin:20rpx;
}

功能函数

index.js:

  audioPlay() {
    this.audioData.play()
    console.log('播放')
  },
  audioPause() {
    this.audioData.pause()
    console.log('暂停')
  },
  audioPlayBack() {
    this.audioData.seek(this.audioData.currentTime-3)
  },
  audioStop() {
    this.audioData.stop()
  },
  audioStart() {
     this.audioData.seek(0)
  },

代码示例

WXML

//index.wxml
<!--pages/index2/index2.wxml-->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src3}}" id="myAudio" controls loop></audio>

<button bindtap='audioPlay'>播放</button>
<button bindtap='audioPause'>暂停</button>
<button bindtap='audioPlayBack'>回放测试</button>
<button bindtap='audioStop'>结束</button>
<button bindtap='audioStart'>回到开头</button>

JS

index.js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46',
    poster: '../../imgs/pic.jpg',
    name: '普通disco',
    author: '佚名',
    src2:'../../music/light_emotion.mp3',
    src3: 'http://sc1.111ttt.cn:8282/2018/1/03m/13/396131229550.m4a?tflag=1546606800&pin=97bb2268ae26c20fe093fd5b0f04be80#.mp3',
  },
  audioPlay() {
    this.audioData.play()
    console.log('播放')
  },
  audioPause() {
    this.audioData.pause()
    console.log('暂停')
  },
  audioPlayBack() {
    this.audioData.seek(this.audioData.currentTime-3)
  },
  audioStop() {
    // this.audioData.stop()
  },
  audioStart() {
     this.audioData.seek(0)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.audioData =wx.createInnerAudioContext()
    this.audioData.src = this.data.src
    this.audioData.autoplay = false
    console.log(this.audioData)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    // this.audioData = wx.createAudioContext('myAudio')

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

值得注意的是，<audio/>组件不再维护，可以使用能力更强的 wx.createInnerAudioContext接口.