切换HTMLAudioElement的src时MediaSession失效的解决咨询

我开发的Web音乐播放器，播放时MediaSession能正常工作——手机显示播放通知、蓝牙设备可控制播放。但切换歌曲时，修改HTMLAudioElement的src后，如果新歌曲处于暂停状态未立即播放，或者加载出错，MediaSession就会失效：通知消失，蓝牙设备的操作完全无响应。

以下是基于你提供的Pinia store代码的修复方案：

核心原因 #

MediaSession依赖活跃的媒体播放上下文，当音频元素切换资源后未进入播放状态，浏览器会默认认为媒体会话已结束，自动销毁通知和控制能力。我们需要主动维护MediaSession的状态，即使在暂停或加载失败场景下，也要强制保持会话活跃。

具体修复步骤 #

1. 切换歌曲时强制更新MediaSession元数据与状态 #

修改loadCurrentSong方法，不管歌曲是否立即播放，都手动同步MediaSession的元数据和播放状态，避免会话被浏览器回收：

loadCurrentSong() {
  if (this.currentSong) {
    this.player.src = this.getSongUrl(this.currentSong)
    // 强制更新MediaSession元数据，确保通知显示当前歌曲信息
    this.updateMediaSessionMetadata()
    // 即使暂停也要明确设置播放状态
    this.updatePlaybackState(this.isPaused ? 'paused' : 'playing')
  }
}

2. 完善错误处理，出错时维持MediaSession #

在音频错误事件中，除了提示错误，还要重置MediaSession状态，防止会话丢失：

this.player.addEventListener('error', (event) => {
  console.error('播放出错:', event.error)
  Notify.create("播放歌曲时发生错误。")
  // 出错后仍维持MediaSession，设置为暂停状态
  this.updatePlaybackState('paused')
  // 保持通知显示当前出错的歌曲信息
  this.updateMediaSessionMetadata()
})

3. 新增核心管理方法 #

补充updateMediaSessionMetadata和updatePlaybackState方法，统一管理MediaSession的状态：

actions: {
  // ... 已有的其他方法

  updateMediaSessionMetadata() {
    if (!('mediaSession' in navigator) || !this.currentSong) return
    navigator.mediaSession.metadata = new MediaMetadata({
      title: this.currentSong.title,
      artist: this.currentSong.artist,
      album: this.currentSong.album,
      artwork: [
        { src: this.currentSong.coverUrl, sizes: '512x512', type: 'image/png' }
      ]
    })
  },

  updatePlaybackState(state) {
    if (!('mediaSession' in navigator)) return
    navigator.mediaSession.playbackState = state
    // 同步本地状态
    this.isPaused = state === 'paused'
  },
}

4. 初始化时预设置状态 #

在initialize方法末尾添加初始化MediaSession的逻辑，避免初始状态空白：

initialize() {
  this.addEventListeners()
  this.setActionHandlers()
  this.loadLastSession()
  // 初始化时同步MediaSession状态
  if (this.currentSong) {
    this.updateMediaSessionMetadata()
    this.updatePlaybackState(this.isPaused ? 'paused' : 'playing')
  }
}

额外优化：避免重复复用Audio元素（可选） #

如果频繁替换src导致媒体上下文不稳定，可以考虑每次切换歌曲时创建新的Audio元素，并重新绑定事件：

loadCurrentSong() {
  if (this.currentSong) {
    // 销毁旧的Audio元素
    this.player.remove()
    // 创建新的Audio实例
    this.player = new Audio()
    // 重新绑定所有事件
    this.addEventListeners()
    // 设置新资源
    this.player.src = this.getSongUrl(this.currentSong)
    // 同步MediaSession状态
    this.updateMediaSessionMetadata()
    this.updatePlaybackState(this.isPaused ? 'paused' : 'playing')
  }
}

验证要点 #

• 切换歌曲后暂停：通知应持续显示当前歌曲信息，蓝牙控制的播放/暂停按钮可正常触发
• 歌曲加载出错：通知不消失，仍能通过控制按钮切换到下一首
• 后台状态下：即使暂停，通知保持可见，蓝牙设备可继续操作

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