微信小程序播放背景音乐（wx.createInnerAudioContext）

需求背景：微信小程序内添加背景音乐，进行全局控制播放与暂停

创建全局背景音乐
app.js

// app.js
App({
  onLaunch() {
    this.initAudeo();
  },
  globalData: {
    innerAudioContext: "",
    audioSrc: "", // 音频地址
  },
  // 初始化音频信息
  initAudeo() {
    this.globalData.innerAudioContext = wx.createInnerAudioContext();
    this.globalData.innerAudioContext.autoplay = true;
    this.globalData.innerAudioContext.src = this.globalData.audioSrc;
    this.globalData.innerAudioContext.loop = true;
  },
  // 播放事件
  audioPlay() {
    this.globalData.innerAudioContext.play();
  },
  // 暂停事件
  audioPause() {
    this.globalData.innerAudioContext.pause();
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

业务脚本js使用举例

const app = getApp(); // 引用全局公共js

Page({
  data: {},

  onReady() {},

  onLoad(options) {},

  // 播放事件
  audeoPlay() {
    app.audioPlay();
  },

  // 暂停事件
  audioPause() {
    app.audioPause();
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

功能依托于微信小程序内置的 wx.createInnerAudioContext() 方法，相关更多方式使用可参考官方文档。

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html