uniapp 如何实现后台播放音频功能

在uniapp中实现后台播放音频功能时，遇到以下问题：

  1. 切换到后台或锁屏后音频自动停止，如何保持持续播放？
  2. 是否需要配置特定的manifest.json权限或原生插件？
  3. iOS和Android端的实现方式是否有差异？
  4. 如何控制后台播放时的通知栏显示（如播放/暂停按钮）？
  5. 有没有现成的插件或示例代码可以直接参考？

希望有经验的大佬能分享具体实现步骤或解决方案！

2 回复

在uniapp中实现后台播放音频，可使用uni.createInnerAudioContext()创建音频实例，设置obeyMuteSwitch: false防止静音，并通过play()播放。需在manifest.json中配置后台运行权限，确保应用退至后台仍可播放。


在 UniApp 中实现后台播放音频功能，主要通过 uni.createInnerAudioContext() API 实现，并结合应用配置确保后台运行权限。以下是具体步骤和代码示例：

1. 创建音频上下文并播放

在页面中初始化音频对象，设置相关属性并播放：

// 在页面或组件中定义
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'https://example.com/audio.mp3'; // 音频链接
innerAudioContext.autoplay = false; // 建议手动控制播放
innerAudioContext.loop = false; // 是否循环

// 播放音频
innerAudioContext.play();

// 监听播放结束事件
innerAudioContext.onEnded(() => {
  console.log('音频播放结束');
});

2. 配置应用后台运行权限

  • Android 平台：
    在 manifest.json 的 app-plus 节点下添加后台播放配置：
    "app-plus": {
  "distribute": {
    "android": {
      "permissions": [
        "android.permission.WAKE_LOCK",
        "android.permission.MODIFY_AUDIO_SETTINGS"
      ]
    }
  },
  "modules": {
    "Audio": {}
  }
}
  • iOS 平台：
    需在 manifest.json 中声明音频后台模式，并确保音频格式兼容（如 MP3）：
    "app-plus": {
  "distribute": {
    "ios": {
      "UIBackgroundModes": ["audio"]
    }
  }
}

3. 管理播放状态

通过监听应用生命周期，控制音频在后台的暂停与恢复：

// 应用进入后台时暂停（可选）
onHide() {
  innerAudioContext.pause();
},

// 应用回到前台时恢复播放（可选）
onShow() {
  innerAudioContext.play();
}

4. 注意事项

  • 音频格式：确保使用平台兼容的格式（如 MP3、AAC）。
  • 网络音频：如需播放远程音频，需配置网络请求权限。
  • 用户交互：iOS 要求音频播放必须由用户触发起始（如按钮点击事件）。

完整示例代码

<template>
  <view>
    <button @tap="playAudio">播放音频</button>
    <button @tap="pauseAudio">暂停音频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioContext: null
    };
  },
  onLoad() {
    this.audioContext = uni.createInnerAudioContext();
    this.audioContext.src = 'https://example.com/audio.mp3';
  },
  methods: {
    playAudio() {
      this.audioContext.play();
    },
    pauseAudio() {
      this.audioContext.pause();
    }
  },
  onUnload() {
    // 页面卸载时销毁音频实例
    this.audioContext.destroy();
  }
};
</script>

通过以上步骤，即可在 UniApp 中实现基本的后台音频播放功能。

回到顶部