uniapp跳转页面时如何停止音频播放

在uniapp中，当跳转到新页面时，如何自动停止当前正在播放的音频？我试过在onUnload生命周期里调用audio.stop()方法，但有时候会报错。有没有更稳定的解决方案？需要兼容iOS和安卓平台。

2 回复

在跳转页面前，调用uni.createInnerAudioContext()实例的.stop()方法停止播放。建议在onUnload或onHide生命周期中处理音频停止逻辑。


在 UniApp 中，跳转页面时停止音频播放可以通过以下步骤实现：

  1. 创建音频实例：使用 uni.createInnerAudioContext() 创建音频对象。
  2. 监听页面跳转事件：在页面的生命周期函数（如 onUnload 或 onHide）中调用音频停止方法。
  3. 停止音频：使用 audioContext.stop() 停止播放，并可选调用 audioContext.destroy() 释放资源。

示例代码：

// 在页面或组件的 data 中定义音频实例
data() {
  return {
    audioContext: null
  }
},
onLoad() {
  // 创建音频实例
  this.audioContext = uni.createInnerAudioContext();
  this.audioContext.src = '你的音频文件路径';
  this.audioContext.play(); // 开始播放
},
onUnload() {
  // 页面卸载时停止音频
  if (this.audioContext) {
    this.audioContext.stop(); // 停止播放
    this.audioContext.destroy(); // 销毁实例，释放资源
  }
}

说明：

  • onUnload：页面卸载时触发，适合用于停止音频。
  • stop()：停止播放并重置位置。
  • destroy()：销毁实例，避免内存泄漏。

如果使用全局音频管理，可以在 App.vue 中统一处理。简单高效，确保跳转时音频立即停止。

回到顶部