uniapp 播放音频时跳转页面会打断播放如何解决？

在uniapp中，当播放音频时跳转页面会导致音频中断播放，有什么方法可以保持音频持续播放不中断？特别是在使用vue-router进行页面跳转时，音频播放会停止，希望能找到解决方案让音频在页面切换时继续播放。

2 回复

使用uni.createInnerAudioContext创建音频实例，在页面跳转前不要销毁它。在App.vue中全局管理音频实例，或使用Vuex存储音频状态，确保页面切换时音频继续播放。


在 UniApp 中，音频播放时跳转页面会中断播放，这是因为页面切换时组件被销毁。可以通过以下方法解决：

1. 使用全局音频管理器

UniApp 提供了全局的音频管理器 uni.createInnerAudioContext()，它不受页面生命周期影响。

实现步骤：

  • 在 App.vue 的 onLaunch 中创建音频实例。
  • 通过 Vue 原型或全局状态管理（如 Vuex）共享该实例。
  • 在各页面中控制播放/暂停。

示例代码：

在 App.vue 中：

export default {
  onLaunch() {
    // 创建全局音频实例
    this.globalData.audio = uni.createInnerAudioContext();
    this.globalData.audio.src = '你的音频URL'; // 可动态设置
  },
  globalData: {
    audio: null
  }
}

在页面中使用：

// 获取全局音频实例
const app = getApp();
const audio = app.globalData.audio;

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

// 跳转页面时不会中断，如需暂停可手动控制
// audio.pause();

2. 使用 Vuex 管理状态（可选）

如果项目使用 Vuex，可以将音频状态和操作集中管理。

注意事项：

  • 确保音频源 URL 有效且支持跨域。
  • 合理管理音频生命周期，避免资源浪费。
  • 在应用退出时手动销毁音频实例（如 audio.destroy()）。

通过以上方法，即可实现页面跳转时音频连续播放。

回到顶部