如何在iOS和Android锁屏上实现Web Audio API的媒体控制？

我正在开发一款通过Web Audio API播放大量短音频样本的Web应用，尝试使用Media Session API在iOS和Android的锁屏上实现媒体控制。以下是我使用的代码：

const initLockScreenCtrls = () => {
  if ('mediaSession' in navigator && !lockScreenControlsAreInit) {
    lockScreenControlsAreInit = true;

    navigator.mediaSession.setActionHandler('play', function () {
      document.getElementById('playPause').click();
    });

    navigator.mediaSession.setActionHandler('pause', function () {
      document.getElementById('playPause').click();
    });
    console.log(navigator.mediaSession.playbackState); // yields "playing"
  }
}

document.addEventListener('click', initLockScreenCtrls, {once: true});

这段代码在桌面端配合额外的静音<audio>元素hack勉强可用，但无法解决移动端锁屏控制的问题。如何让Web Audio API在移动平台上实现锁屏媒体控制？

Web Audio API本身不会被系统识别为标准媒体播放行为，移动端系统的媒体会话机制依赖可见的媒体元素触发，所以需要结合一个隐形的<audio>元素来打通逻辑：

• 添加隐形占位音频元素
  在页面中插入一个不可见的静音音频元素，用来让系统感知到媒体上下文：

  <audio id="dummyAudio" style="display: none;" muted></audio>
  

• 同步播放状态与媒体会话
  不要通过模拟点击按钮的方式触发控制，直接绑定逻辑到占位音频和Media Session，确保状态同步：

  const dummyAudio = document.getElementById('dummyAudio');
  let isPlaying = false;
  
  // 核心播放切换逻辑
  function togglePlayback() {
    isPlaying = !isPlaying;
  
    // 同步占位音频状态
    if (isPlaying) {
      // 移动端必须在用户交互上下文内执行play()
      dummyAudio.play().catch(err => console.error(err));
      navigator.mediaSession.playbackState = 'playing';
      // 这里执行你的Web Audio样本播放逻辑
    } else {
      dummyAudio.pause();
      navigator.mediaSession.playbackState = 'paused';
      // 这里执行你的Web Audio暂停/停止逻辑
    }
  }
  
  // 初始化媒体会话控件
  const initLockScreenCtrls = () => {
    if ('mediaSession' in navigator) {
      // 绑定锁屏播放/暂停动作
      navigator.mediaSession.setActionHandler('play', () => {
        if (!isPlaying) togglePlayback();
      });
      
      navigator.mediaSession.setActionHandler('pause', () => {
        if (isPlaying) togglePlayback();
      });
  
      // 可选：设置锁屏显示的媒体元数据
      navigator.mediaSession.metadata = new MediaMetadata({
        title: '音频样本播放',
        artist: '你的应用名称',
        artwork: [{ src: 'path/to/cover-image.jpg', sizes: '512x512', type: 'image/jpeg' }]
      });
    }
  }
  
  // 必须通过用户交互触发初始化（移动端安全限制）
  document.addEventListener('click', initLockScreenCtrls, { once: true });
  // 将播放按钮点击事件绑定到核心逻辑
  document.getElementById('playPause').addEventListener('click', togglePlayback);
  

• 移动端关键注意事项

  • 所有媒体相关操作必须在用户主动交互（比如点击、触摸）的上下文内执行，否则会被移动端浏览器的安全策略拦截。
  • 必须实时更新navigator.mediaSession.playbackState，系统会根据这个状态自动切换锁屏控件的显示状态。
  • iOS的WebKit对占位音频元素的依赖更强，确保元素始终存在且状态正确，不要动态移除它。

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