微信小程序中如何使用wx.createInnerAudioContext？-猿码集

使用wx.createInnerAudioContext播放音频

如果在微信小程序中需要播放音频，可以使用wx.createInnerAudioContext创建一个内部音频上下文对象，通过该对象可以操作音频的播放、暂停、停止等，同时也可以获取音频的时长和当前播放进度等信息。

1. 创建InnerAudioContext对象

我们可以通过wx.createInnerAudioContext()方法创建一个InnerAudioContext对象，代码如下：


const backgroundAudioManager = wx.createInnerAudioContext();

2. 设置音频地址

设置音频地址可以通过InnerAudioContext对象的src属性设置，代码如下：


backgroundAudioManager.src = 'http://example.com/music/1.mp3';

注意：音频文件必须是本地文件或者服务器上的文件，否则会报错。

3. 播放音频

播放音频可以通过InnerAudioContext对象的play()方法实现，代码如下：


backgroundAudioManager.play();

4. 监听音频状态变化

可以通过InnerAudioContext对象的事件监听来获取音频的状态变化，比如音频播放、暂停、停止等状态变化。

以下是常用的事件：

- onCanplay：可以播放时触发。

- onPlay：开始播放时触发。

- onPause：暂停播放时触发。

- onStop：停止播放时触发。

- onEnded：播放结束时触发。

- onError：播放出错时触发。

代码示例：


backgroundAudioManager.onPlay(() => {
  console.log('开始播放');
});
backgroundAudioManager.onPause(() => {
  console.log('暂停播放');
});
backgroundAudioManager.onEnded(() => {
  console.log('播放结束');
});
backgroundAudioManager.onError((res) => {
  console.log(res.errMsg);
  console.log(res.errCode);
});

实战应用

下面我们通过一个实战案例来演示如何使用wx.createInnerAudioContext播放音频。

1. 创建一个播放器

我们可以先创建一个基本的音频播放器，代码如下：


<view class="container">
  <image class="cover" src="{{coverUrl}}" mode="aspectFit" />
  <view class="info">
    <view class="title">{{title}}</view>
    <view class="singer">{{singer}}</view>
  </view>
  <view class="controls">
    <button class="btn" bindtap="playPause">{{isPlaying ? '暂停' : '播放'}}</button>
    <button class="btn" bindtap="stop">停止</button>
  </view>
</view>

其中，coverUrl为音频封面图片地址，title为音频标题，singer为音频歌手名字，isPlaying为音乐播放状态，playPause()为播放按钮点击事件的处理函数，stop()为停止按钮的点击事件处理函数。

2. 实现播放按钮事件处理函数

playPause()函数代码如下：


playPause() {
  if (this.audioManager.paused) {
    // 暂停状态，点击后开始播放
    this.audioManager.play();
    this.setData({
      isPlaying: true
    });
  } else {
    // 播放状态，点击后暂停播放
    this.audioManager.pause();
    this.setData({
      isPlaying: false
    });
  }
}

其中，this.audioManager为InnerAudioContext对象，在Page.onLoad()生命周期函数中进行初始化：


Page({
  onLoad() {
    this.audioManager = wx.createInnerAudioContext();
    this.audioManager.onPlay(() => {
      console.log('开始播放');
    });
    this.audioManager.onPause(() => {
      console.log('暂停播放');
    });
    this.audioManager.onEnded(() => {
      console.log('播放结束');
    });
    this.audioManager.onError((res) => {
      console.log(res.errMsg);
      console.log(res.errCode);
    });
  }
});

3. 实现停止按钮事件处理函数

stop()函数代码如下：


stop() {
  this.audioManager.stop();
  this.setData({
    isPlaying: false
  });
}

4. 实现音频信息的获取

可以通过InnerAudioContext对象的duration和currentTime属性获取音频的时长和当前播放进度，代码如下：


console.log(this.audioManager.duration);
console.log(this.audioManager.currentTime);

5. 小结

本文介绍了如何在微信小程序中使用wx.createInnerAudioContext播放音频，通过一个实战案例演示了如何实现音频播放、暂停、停止等操作，并获取了音频的时长和当前播放进度等信息。 InnerAudioContext对象还提供了丰富的事件监听，可以通过监听事件获取音频的状态变化。

微信小程序中如何使用wx.createInnerAudioContext？