uniapp 后台音乐
如何在 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();
}
}
}
}常见问题解决方案
- 播放中断检查设备电量优化设置
- 无声音输出确认系统音量及静音开关状态
- 进度更新不及时建议使用
onTimeUpdate事件
以上实现方案适用于 UniApp 的 H5 和 App 平台，小程序平台需使用各自的原生 API。实际开发时应根据目标平台进行兼容性测试。
