基于Turbo Native Android实现后台音频播放的问题咨询

要解决Turbo应用后台音频停止的问题，核心是绕过系统后台资源限制，同时适配Turbo的页面生命周期，具体方案如下：

• 改用Web Audio API管理音频播放
  原生<audio>标签在后台容易被系统优先级调度终止，Web Audio API拥有更稳定的后台播放支持。示例代码：

  // 全局作用域创建AudioContext，避免页面切换时被销毁
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  let audioSource;
  
  async function startStream(url) {
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
    
    audioSource = audioContext.createBufferSource();
    audioSource.buffer = audioBuffer;
    audioSource.connect(audioContext.destination);
    audioSource.loop = true; // 适配电台流循环播放
    audioSource.start();
  }
  

  注意：首次播放需要用户交互触发（比如点击播放按钮），这是浏览器的安全限制。

• 配置平台后台播放权限

  • iOS：在Info.plist中添加UIBackgroundModes数组，包含audio值，告知系统应用需要后台音频能力。
  • Android：在AndroidManifest.xml中添加权限：

    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />
    

    同时启动前台服务，显示播放通知（系统要求后台音频应用必须有前台通知）。

• 适配Turbo页面生命周期
  Turbo的页面切换会触发页面卸载，要避免音频实例被销毁：

  • 将音频播放逻辑放在全局JS文件中（而非页面内联脚本），确保Turbo页面切换时实例不被回收。
  • 监听Turbo的turbo:before-visit事件，阻止默认的页面卸载逻辑对音频的影响：

    document.addEventListener('turbo:before-visit', (event) => {
      if (audioContext.state === 'running') {
        // 保留音频播放，不随页面切换终止
        event.preventDefault();
        // 手动处理页面更新逻辑，比如只替换内容区域
        Turbo.visit(event.detail.url, { frame: 'content' });
      }
    });
    

• 使用Wake Lock API防止设备休眠
  部分系统在后台会暂停JS执行，可申请唤醒锁保持设备活跃（需用户授权）：

  let wakeLock = null;
  
  async function requestWakeLock() {
    try {
      wakeLock = await navigator.wakeLock.request('screen');
    } catch (err) {
      console.log(err.message);
    }
  }
  
  // 播放时申请，暂停时释放
  startStream('your-stream-url').then(requestWakeLock);
  

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