如何在小程序中实现音频播放

在如何使用小程序媒体组件这篇文章中，我们介绍了小程序媒体组件的使用，但是对音频组件部分讲的不够详细，本文将对音频部分做些补充。

在教程开始之前，需要搭建搭建好小程序的基础开发环境，关于如何配置，大家可以参考如何入门小程序开发这篇文章的入门教程。

音频组件的使用

音频组件使用较为简单，在index.wxml文件中撰写调用audio组件即可。

<audio controls src="https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3"></audio>

有前端开发经验的小伙伴肯定能看懂，src中是我们要播放音频的地址，那么controls是什么意思呢？我们先看看官方的文档吧，如下表。

原来，controls的意思是是否显示默认控件，默认值是不显示的，当我们写出controls才会显示播放的控件。当然，我们还可以为当前控件加入其它属性。

<audio controls src="https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3" poster="http://i1.hdslb.com/bfs/archive/89252dadd2525f8190485a069f73cdf3d783cabc.jpg" name="普通disco" author="洛天依/言和"></audio>

我们增加了音乐名称和作者，并给该音频配置了封面。为了优化代码，我们可以这样写。首先修改index.wxml文件如下。

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls></audio>

之后，我们将音频数据存储在index.js目录下，将下面的代码放在data{}之间。

poster: 'http://i1.hdslb.com/bfs/archive/89252dadd2525f8190485a069f73cdf3d783cabc.jpg',
name: '普通disco',
author: '洛天依/言和',
src: 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3',

这时，我们就做到了前后端数据分离，后续可以实现更多功能，比如可以通过后端实现下一曲的功能。

index.wxml

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls></audio>
<button bindtap='next'>下一曲</button>

index.js

  data: {
      poster: 'http://i1.hdslb.com/bfs/archive/89252dadd2525f8190485a069f73cdf3d783cabc.jpg',
      name: '普通disco',
      author: '洛天依/言和',
      src: 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3',
  },
next(){
  var i = 0;
  var array = [{
    poster: 'http://i1.hdslb.com/bfs/archive/89252dadd2525f8190485a069f73cdf3d783cabc.jpg',
    name: '普通disco',
    author: '洛天依/言和',
    src: 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3',
  },
  {
    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',
  }]
  i++
  this.setData({
    poster: array[i].poster,
    name: array[i].name,
    author: array[i].author,
    src: array[i].src
  })
},

这时，当我们点击下一曲按钮时，会执行next()函数，自动更换poster、name、author、src等数据。

音频API – AudioContext的使用

我们已经学会了音频组件的基本调用步骤，控制音频暂停，播放，转跳等功能需要相关API的支持，接下来，我们就看看如何使用API来实现这些功能。

音频播放暂停、播放等功能需要AudioContext接口，在使用该接口之前，需要使用wx.createAudioContext()创建对象。创建完对象后，我们使用播放音频方法AudioContext.play()，暂停音频方法AudioContext.pause()，跳转到指定位置方法AudioContext.seek(number position)来控制当前音频。

wx.createAudioContext()需要指定当前组件的ID才能使用，所以我们修改index.wxml内容如下。

<audio id="Audio" poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls ></audio>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>

这里id内的内容可随意指定，但需要记录其内容。接下来，我们在index.js文件的page()中，写出下面的代码。

  data: {
      poster: 'http://i1.hdslb.com/bfs/archive/89252dadd2525f8190485a069f73cdf3d783cabc.jpg',
      name: '普通disco',
      author: '洛天依/言和',
      src: 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3',
  },
  audioPlay() {
    this.audioCtx.play()
  },
  audioPause() {
    this.audioCtx.pause()
  },
  audio14() {
    this.audioCtx.seek(14)
  },
  audioStart() {
    this.audioCtx.seek(0)
  },
  onReady: function () {
    this.audioCtx = wx.createAudioContext('Audio')
  },

这段代码中，我们指定了默认的音乐数据，存放在data()中，然后创建audioPlay、audioPause()、audio14()、audioStart()四个函数，来控制当前音乐，在onReady函数中，我们指定了当前音频的ID。

音频API – InnerAudioContext的使用

新版的小程序中，官方推荐使用InnerAudioContext接口来替代AudioContext接口，并且后续AudioContext将不再维护。同时<audio>组件也不在维护，我们需要自己去写代码去实现前端展示功能。

InnerAudioContext接口使用和AudioContext比较接近，在调用前，我们不需要指定相关ID。我们可以使用下面的代码来实现基本的播放功能。

index.js

  data: {
    status:"等待播放"
  },
  audioPlay() {
    const innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.autoplay = true
    innerAudioContext.src = 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3'
    innerAudioContext.onPlay(() => {
      this.setData({
        status: "正在播放"
      })
    })
  },

index.wxml

<button type="primary" bindtap="audioPlay">播放</button>
<text>当前状态：{{status}}</text>

InnerAudioContext接口参数较多，官方文档写的比较粗糙，为了看起来易懂，我将其做成表格。

同样，也给出了若干接口，本文只列出几个常用的接口，其他接口使用请见官方文档。

参考上表，我们可以为我们的小程序增加暂停功能，修改代码如下。

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<text>当前状态：{{status}}</text>

接下来，我们优化下index.js文件代码。

Page({
  data: {
    status:"等待播放"
  },
  audioStatus(){
  },
  audioPlay() {
    this.innerAudioContext.play()
    this.innerAudioContext.onPlay(() => {
      this.setData({
        status: "正在播放"
      })
    })
  },
  audioPause(){
    this.innerAudioContext.pause()
    this.innerAudioContext.onPause(() => {
      this.setData({
        status: "暂停"
      })
    })
  },
  onReady: function () {
    this.innerAudioContext = wx.createInnerAudioContext()
    this.innerAudioContext.src = 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3'
  },
})

总结

现在，你学会使用音频组件及API的使用了吗？关于API推荐使用InnerAudioContext，根据官方说明音频组件和AudioContext将不再更新。后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案，为开发者提供完整的云端支持，弱化后端和运维操作，使用平台原生 API 进行核心业务开发，实现快速上线和迭代。欢迎免费使用！