JavaScript Media Session API问题：暂停正常，播放失效如何修复？

问题出在Web Audio API的异步操作与Media Session状态更新的时机不匹配：audioCtx.suspend()和audioCtx.resume()都是异步方法，会返回Promise，原代码中直接在调用后立即设置playbackState，可能导致Media Session未正确捕获到状态变化，从而无法切换按钮状态。

修复后的代码 #

<button id="button">Initialize</button>

if ('mediaSession' in navigator) {
  let audioCtx, oscillator, gainNode;

  // 修改为异步处理器，等待异步操作完成后更新状态
  navigator.mediaSession.setActionHandler('play', async () => {
    await audioCtx.resume();
    navigator.mediaSession.playbackState = 'playing';
  });

  navigator.mediaSession.setActionHandler('pause', async () => {
    await audioCtx.suspend();
    navigator.mediaSession.playbackState = 'paused';
  });

  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: 20,
      position: 0,
    });
  }

  button.onclick = async () => {
    if (!audioCtx) {
      audioCtx = new AudioContext();
      oscillator = audioCtx.createOscillator();
      gainNode = audioCtx.createGain();
      oscillator.connect(gainNode);
      gainNode.connect(audioCtx.destination);
      oscillator.frequency.value = 440;
      gainNode.gain.value = 0.1;
      oscillator.start();
      await audioCtx.resume();
      navigator.mediaSession.playbackState = 'playing';
    }
  };
}

关键改动说明 #

• 将play和pause的动作处理器改为异步函数，通过await等待resume()/suspend()操作完成后，再更新navigator.mediaSession.playbackState，确保状态完全同步。
• 异步操作完成后再更新状态，能让Chrome的Media Session正确感知到播放状态变化，从而触发按钮的显示切换。

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