当前位置：首页 > uni-app

uniapp 后台音乐

2026-02-06 02:34:32uni-app

如何在 UniApp 中实现后台音乐播放

配置 manifest.json 文件 在项目的 manifest.json 文件中，确保已启用后台运行权限。找到 app-plus 节点，添加以下配置：

"app-plus": {
  "runmode": "liberate",
  "background": {
    "audio": {
      "description": "后台音乐播放"
    }
  }
}

使用 uni.getBackgroundAudioManager API UniApp 提供了 uni.getBackgroundAudioManager 接口，用于管理后台音乐播放。初始化并设置音频源：

const bgAudioManager = uni.getBackgroundAudioManager();
bgAudioManager.title = '音乐标题';
bgAudioManager.singer = '歌手名';
bgAudioManager.coverImgUrl = '封面图片URL';
bgAudioManager.src = '音频文件URL';

监听播放状态 通过事件监听实现播放状态的控制和反馈：

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

处理权限和兼容性 部分 Android 设备需要动态申请后台权限。在页面中调用以下方法：

uni.authorize({
  scope: 'scope.record',
  success() {
    console.log('权限申请成功');
  }
});

注意事项

iOS 系统限制较多，需确保音频源为 HTTPS 协议。
部分国产 Android 机型可能需手动开启应用的后台权限。
使用本地音频文件时，路径需通过 uni.downloadFile 下载后使用。

示例代码整合 以下是一个完整的后台音乐播放组件示例：

export default {
  data() {
    return {
      bgAudioManager: null,
      isPlaying: false
    }
  },
  mounted() {
    this.initAudio();
  },
  methods: {
    initAudio() {
      this.bgAudioManager = uni.getBackgroundAudioManager();
      this.bgAudioManager.title = '示例音乐';
      this.bgAudioManager.src = 'https://example.com/audio.mp3';

      this.bgAudioManager.onPlay(() => {
        this.isPlaying = true;
      });
      this.bgAudioManager.onPause(() => {
        this.isPlaying = false;
      });
    },
    togglePlay() {
      if (this.isPlaying) {
        this.bgAudioManager.pause();
      } else {
        this.bgAudioManager.play();
      }
    }
  }
}

常见问题解决方案

uniapp 后台音乐