Nuxt.js使用Vue-Howler时移动端锁屏暂停按钮无法触发音频暂停怎么解决

常见触发原因 #

• this指向错误：如果setActionHandler注册时机不对，或者回调内的this没有正确绑定到播放器组件实例，会导致togglePlayback方法调用无响应
• Media Session状态不同步：仅注册pause事件回调不够，需要同步更新navigator.mediaSession.playbackState属性，浏览器会校验该状态判断是否需要触发对应回调，状态不匹配时会忽略点击事件
• 注册时机错误：如果在音频未完成初始化、未被用户主动触发播放时就注册回调，部分移动端浏览器会回收回调引用，导致点击无响应
• 方法逻辑不匹配：togglePlayback方法如果没有正确操作当前正在播放的Vue-Howler实例，会出现方法执行但音频无变化的问题
• SSR环境报错：Nuxt SSR模式下直接调用navigator相关API会触发服务端报错，导致后续逻辑中断

正确配置步骤 #

1. 首先新增环境判断，确保所有Media Session逻辑仅在客户端执行，同时在音频成功播放后再注册回调，绑定正确的实例引用：

// 在playEpisode播放方法内执行
async playEpisode() {
  // 原有播放逻辑，确保是用户主动交互触发的播放行为
  await this.$howler.play()
  
  // 仅客户端执行Media Session相关逻辑
  if (process.client && 'mediaSession' in navigator) {
    // 同步播放状态
    navigator.mediaSession.playbackState = 'playing'
    // 保存当前组件实例，避免回调内指向异常
    const vm = this
    
    // 同时注册pause和play回调，避免状态混乱
    navigator.mediaSession.setActionHandler('pause', () => {
      vm.togglePlayback()
      navigator.mediaSession.playbackState = 'paused'
    })
    
    navigator.mediaSession.setActionHandler('play', () => {
      vm.togglePlayback()
      navigator.mediaSession.playbackState = 'playing'
    })
  }
}

2. 修正togglePlayback方法，确保直接操作当前活跃的Vue-Howler实例：

togglePlayback() {
  // 此处的$howler需替换为你项目中实际正在播放的Vue-Howler实例引用
  if (this.$howler.playing) {
    this.$howler.pause()
  } else {
    this.$howler.play()
  }
}

注意：所有音频播放操作必须由用户主动点击交互触发，自动播放的音频会被移动端浏览器拦截，对应的Media Session回调也会失效。

内容的提问来源于stack exchange，提问作者Gas