小程序背景音乐

需求

实现一个可循环播放背景音乐的组件。（小程序切入后台会暂停播放，重新显示后会继续播放）

使用对象

• InnerAudioContext 对象
  • InnerAudioContext 实例，可通过 wx.createInnerAudioContext 接口获取实例。注意，音频播放过程中，可能被系统中断，可通过 wx.onAudioInterruptionBegin、wx.onAudioInterruptionEnd 事件来处理这种情况。
• wx.createInnerAudioContext(Object object)
  • 创建内部 audio 上下文 InnerAudioContext 对象。

实现

Music.js

export default class Music {
  // 设置是否播放音频
  static isPlayMusic = true

  static _audio = null

  static initInnerAudioContext = async () => {
    const audio = wx.createInnerAudioContext();
    audio.src = "xxxxx"; //音频资源的地址，用于直接播放。
    audio.title = '背景音乐';
    audio.loop = true; //是否循环播放，默认为 false。
    if (Music.isPlayMusic) {
      audio.play(); //播放方法。
    } else {
      audio.pause(); //暂停，暂停后的音频再播放会从暂停处开始播放。
    }
    return audio;
  }

  static getInnerAudioContext = async () => {
    if (_.isEmpty(Music._audio)) {
      const audio = this.initInnerAudioContext();
      Music._audio= audio;
      return Music._audio;
    }
    return Music._audio;
  }

  static destroyInnerAudioContext = () => {
    if (!_.isEmpty(Music._audio)) {
      Music._audio.destroy(); //销毁当前实例。
      Music._audio = null;
    }
  }

  static refreshAudioPlayingStatus = () => {
    if (!_.isEmpty(Music._audio) && Music._audio.paused && Music.isPlayMusic) {
      Music._audio.play();
    }
  }
}

组件
index.js

import Music from 'xxx';

Component({
  data: {
    isStart: true,
  },
  pageLifetimes: {
    show() {
      this.setData({ isStart: Music.isPlayMusic });
    },
  },
  async ready() {
    Music.getInnerAudioContext();
    this.setData({ isStart: Music.isPlayMusic });
  },
  methods: {
    async onChangeAudioStatus() {
      const audio = Music.getInnerAudioContext();
      if (_.isEmpty(audio)) {
        return;
      }
      if (Music.isPlayMusic) {
        audio.pause();
      } else {
        audio.play();
      }
      Music.isPlayMusic = !Music.isPlayMusic;
      this.setData({ isStart: Music.isPlayMusic });
    },
  },
});

index.wxml

<!-- 点击可停止音乐 -->
<image
  class="music {{ isStart ? 'rotate-center' : '' }}"
  mode="aspectFill"
  src="{{ isStart ? './images/music.png' : './images/no-music.png' }}"
  bindtap="onChangeAudioStatus"
/>

使用页
index.js

import Music from 'xxx';
Page({
 ...,
 async onShow(options) {
   Music.refreshAudioPlayingStatus();
 }
 onUnload() {
   Music.destroyInnerAudioContext();
 },
})

index.wxml

<music />

END