mpvue开发音频类小程序踩坑和建议详解

1. 前言

mpvue 是一个基于 Vue.js 核心的高性能小程序开发框架。它传承了 Vue.js 的语法风格和开发习惯，在小程序开发中尽可能的减少了学习成本和上手难度。同时，mpvue 利用 Webpack 和 Vue.js 的自身特性，将组件和业务逻辑代码进行分离抽离，维护更加方便易用。

在开发小程序中，音频类小程序是非常常见的，但是这类小程序存在很多坑点，需要我们在开发过程中多加注意。本文将针对开发音频类小程序时常见的几个问题进行详解，并在文章末尾提出一些建议希望对开发者有所帮助。

2. 可避免的问题

2.1 问题一：背景音乐依旧播放

当小程序页面切换或者关闭后，背景音乐依旧播放，影响用户体验。造成此问题的原因是背景音乐没有被正确关闭。

解决方案：

在页面 onUnload 事件中调用 wx.stopBackgroundAudio() 关闭背景音乐。

示例代码：

<template>
  <div>
    <button @click="playMusic()">播放音乐</button>
  </div>
</template>

<script>
export default {
  methods: {
    playMusic() {
      wx.playBackgroundAudio({
        dataUrl: 'yourMusicUrl',
        title: 'title',
        coverImgUrl: 'yourMusicCoverUrl'
      })
    }
  },
  onUnload() {
    wx.stopBackgroundAudio()
  }
}
</script>

2.2 问题二：两个音频同时播放

当两个页面同时播放音乐时，两个音频流会堵塞导致播放不正常。例如两页面同时播放背景音乐和音效等。

解决方案：

通过 wx.getBackgroundAudioPlayerState API 获取背景音乐状态，在前一个页面关闭背景音乐后，等待一段时间再播放下一个页面的背景音乐。

示例代码：

<template>
  <div>
    <button @click="playMusic()">播放音乐</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      musicState: {}
    }
  },
  methods: {
    // 播放音乐时判断背景音乐状态
    async playMusic() {
      this.musicState = await this.getMusicState()
      if (!this.musicState.paused) {
        // 若当前正在播放背景音乐，则先暂停当前音乐
        wx.stopBackgroundAudio()
        // 等待一段时间再播放，确保上一个背景音乐已关闭
        await new Promise(resolve => setTimeout(resolve, 1000))
      }
      wx.playBackgroundAudio({
        dataUrl: "yourMusicUrl",
        title: "title",
        coverImgUrl: "yourMusicCoverUrl"
      })
    },
    // 获取背景音乐状态
    getMusicState() {
      return new Promise((resolve, reject) => {
        wx.getBackgroundAudioPlayerState({
          success(res) {
            resolve(res)
          },
          fail(err) {
            reject(err)
          }
        })
      })
    }
  }
}
</script>

3. 一些小技巧

3.1 使用 `@touchmove.prevent` 强制停止音乐

在小程序使用原生的下拉刷新功能时，下拉过程中需强制停止背景音乐。这种情况下，可以使用 @touchmove.prevent 阻止事件的默认行为，强制停止背景音乐的播放。

示例代码：

<template>
  <div>
    <div @touchmove.prevent>
      <!-- content -->
    </div>
  </div>
</template>

<script>
export default {
  // 页面下拉刷新时，停止背景音乐
  onPullDownRefresh() {
    wx.stopBackgroundAudio()
    // TODO 下拉刷新操作
  }
}
</script>

3.2 在组件销毁前关闭音乐

在小程序中，组件跟页面的生命周期不一致，因此需要在组件销毁时关闭音乐。可以使用 keep-alive 缓存组件，避免频繁的组件销毁和创建。

示例代码：

<template>
  <div>
    <button @click="playMusic()">播放音乐</button>
  </div>
</template>

<script>
export default {
  activated() {
    wx.playBackgroundAudio({
      dataUrl: 'yourMusicUrl',
      title: 'title',
      coverImgUrl: 'yourMusicCoverUrl'
    })
  },
  deactivated() {
    wx.stopBackgroundAudio()
  }
}
</script>