微信小程序踩坑记 - 背景音乐

最近做的项目中，有一个在小程序中设置背景音乐的需求，一提到音频，很自然就想到 audio 组件了，结果去官网一看，停止维护了。。。

那我们就用 wx.createInnerAudioContext() 来实现吧，其实很简单，需要的功能，官网上基本都有。

在 ios 上播放没声音

我就是这样写的：

const innerAudioContext = wx.createInnerAudioContext();
innerAudioContext.src = 'https://xxxx.mp3';
innerAudioContext.loop = true;
innerAudioContext.play();

在开发者工具中是能正常播放的，但是当我放到我的苹果手机上的时候，就没声音了，安卓手机上就有声音，这是为什么？明明官方文档上说，ios 和 android 都支持 Mp3 格式呀。

然后我就去社区里找答案，有很多人都遇到了同样的问题，然后我就按照下面的解答一个个试。

比如，有人说：

我就加上了innerAudioContext.obeyMuteSwitch =. false，但是对于我来说，不管用。
还有最新的一条评论说：

那我就换一下音频格式，我换成了 mp4 格式，放到苹果手机上，终于有声音了，但是，安卓上又没声音了。。。
于是我就又简单处理了一下：

if(wx.getSystemInfoSync().platform === "ios"){
  innerAudioContext.src = 'https://xxx.mp4';
} else {
  innerAudioContext.src = 'https://xxx.mp3';
}

终于，都能听到声音了 😁。

像这种兼容性问题，还希望官方大大调整完之后，及时更新文档 😭。

全局控制背景音乐

他来了，他来了，他又带着需求走来了，因为这个活动涉及到很多页面，所以，需要每个页面都能控制背景音乐。
像这种全局的配置，可以放在 app.js 文件中，然后通过 getApp() 来获取全局唯一 APP 实例。

//app.js
App({
  onLaunch: function () {
    // 创建背景音乐实例
    this.bgm = wx.createInnerAudioContext({
      useWebAudioImplement: true, // 使用 WebAudio 实现
    });
    if (wx.getSystemInfoSync().platform === "ios") {
      this.bgm.src = "https:xxx.mp4";
    } else {
      this.bgm.src = "https:xxx.mp3";
    }
    // 设置音乐属性
    this.bgm.loop = true; // 循环播放
    this.bgm.obeyMuteSwitch = false;
  },
  
  // 播放背景音乐
  playBgm() {
    if (this.bgm && !this.globalData.isMusicOn) {
      this.bgm.play();
      this.globalData.isMusicOn = true;
    }
  },

  // 暂停背景音乐
  pauseBgm() {
    if (this.bgm && this.globalData.isMusicOn) {
      this.bgm.pause();
      this.globalData.isMusicOn = false;
    }
  },

  // 切换背景音乐状态
  toggleBgm() {
    if (this.globalData.isMusicOn) {
      this.pauseBgm();
    } else {
      this.playBgm();
    }
    return this.globalData.isMusicOn;
  },

  globalData: {
    isMusicOn: false, // 记录音乐开关状态
  },
});

在其他页面中这样使用:

// a.js
const app = getApp();
Page({
  data: {
    musicPaused: !app.globalData.isMusicOn, // 背景音乐是否暂停
  },
  onLoad() {
    app.playBgm();
    this.setData({
      musicPaused: !app.globalData.isMusicOn,
    });
  },
  onShow() {
    this.setData({
      musicPaused: !app.globalData.isMusicOn,
    });
  },
  /**
   * 控制背景音乐
   */
  handleMusic() {
    const isMusicOn = app.toggleBgm();
    this.setData({
      musicPaused: !isMusicOn,
    });
  },
});

参考文档：

微信官方文档：wx.createInnerAudioContext
微信官方文档：InnerAudioContext