uniapp 如何配置 getBackgroundAudioManager

在uniapp中使用getBackgroundAudioManager时，如何正确配置才能实现后台音频播放？我按照官方文档设置了src、title等参数，但切换到后台后音频就会暂停。需要监听哪些事件？iOS和安卓的配置有什么区别？求完整的配置示例代码。

2 回复

在main.js中引入并挂载到Vue原型：

const bgAudioManager = uni.getBackgroundAudioManager()
Vue.prototype.$bgAudio = bgAudioManager

页面中使用：

this.$bgAudio.title = '歌曲名'
this.$bgAudio.src = '音频地址'
this.$bgAudio.play()

在 UniApp 中配置 getBackgroundAudioManager 用于实现后台音频播放功能。以下是详细步骤和代码示例：

1. 获取音频管理器实例

在页面或组件中调用 uni.getBackgroundAudioManager() 创建实例：

const backgroundAudioManager = uni.getBackgroundAudioManager();

2. 配置音频属性

设置音频源、标题等必要属性：

backgroundAudioManager.title = '音频标题';
backgroundAudioManager.singer = '歌手名';
backgroundAudioManager.coverImgUrl = 'https://example.com/cover.jpg';
backgroundAudioManager.src = 'https://example.com/audio.mp3';

3. 监听事件（可选）

根据需要添加事件监听：

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

4. 控制播放

使用管理器方法控制播放状态：

// 播放
backgroundAudioManager.play();

// 暂停
backgroundAudioManager.pause();

// 停止
backgroundAudioManager.stop();

5. 权限配置（重要）

在 manifest.json 中配置后台播放权限：

{
  "app-plus": {
    "distribute": {
      "ios": {
        "UIBackgroundModes": ["audio"]
      },
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.WAKE_LOCK\" />"
        ]
      }
    }
  }
}

注意事项：

  • 音频格式：确保使用平台兼容的格式（如 MP3）
  • 网络权限：如果使用网络音频，需配置网络请求权限
  • iOS 限制：需用户交互（如点击事件）才能触发播放

完整示例：

export default {
  methods: {
    playAudio() {
      const bgm = uni.getBackgroundAudioManager();
      bgm.title = '示例音频';
      bgm.src = 'https://example.com/sample.mp3';
      bgm.play();
    }
  }
}

通过以上配置即可在 UniApp 中实现后台音频播放功能。

回到顶部