Android Chrome环境下锁屏后持续录制麦克风的方案问询

你的核心问题是Android Chrome在锁屏/后台时会暂停MediaRecorder的运行，这是浏览器的后台资源限制策略导致的。以下是几个可行的实现方案，结合你的现有代码修改即可：

方案一：维持AudioContext活跃，保证媒体流不被中断 #

Chrome会优先保留有活跃音频上下文的页面资源，通过创建AudioContext并连接麦克风流，可以让浏览器认为页面在进行音频处理，避免后台暂停录制。

修改你的代码如下：

const chunks = [];
let recorder = null;
let audioContext = null;
let sourceNode = null;

async function beginCapture(){
  let audioStream;
  try {
    audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  } catch {
    alert("Permission denied!");
    return;
  }

  // 创建AudioContext并连接麦克风流，维持活跃状态
  audioContext = new AudioContext();
  sourceNode = audioContext.createMediaStreamSource(audioStream);
  // 连接到静默输出，避免播放麦克风声音
  sourceNode.connect(audioContext.destination);

  recorder = new MediaRecorder(audioStream);
  recorder.ondataavailable = (e) => chunks.push(e.data);
  recorder.onstop = () => {
    saveRecordedAudio(new Blob(chunks));
    // 清理音频资源
    if (sourceNode) sourceNode.disconnect();
    if (audioContext) audioContext.close();
    audioContext = null;
    sourceNode = null;
  }; 
  recorder.start();
}

function saveRecordedAudio(blob){
  const url = URL.createObjectURL(blob);
  const audio = new Audio(url);
  audio.controls = true;
  document.body.appendChild(audio);
  audio.onload = () => URL.revokeObjectURL(url);
}

function stopRecording(){
  recorder.stop();
}

方案二：使用System Wake Lock API（需HTTPS） #

System Wake Lock可以在设备锁屏时保持系统活跃，避免Chrome因设备休眠暂停脚本。该API需要HTTPS环境，且必须通过用户交互触发（比如点击录制按钮时请求）。

添加唤醒锁相关代码：

const chunks = [];
let recorder = null;
let audioContext = null;
let sourceNode = null;
let wakeLock = null;

// 请求系统唤醒锁
async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('system');
    wakeLock.addEventListener('release', () => {
      console.log('唤醒锁已释放');
    });
  } catch (err) {
    console.error(`${err.name}: ${err.message}`);
  }
}

async function beginCapture(){
  let audioStream;
  try {
    audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  } catch {
    alert("Permission denied!");
    return;
  }

  await requestWakeLock(); // 请求唤醒锁
  audioContext = new AudioContext();
  sourceNode = audioContext.createMediaStreamSource(audioStream);
  sourceNode.connect(audioContext.destination);

  recorder = new MediaRecorder(audioStream);
  recorder.ondataavailable = (e) => chunks.push(e.data);
  recorder.onstop = () => {
    saveRecordedAudio(new Blob(chunks));
    if (sourceNode) sourceNode.disconnect();
    if (audioContext) audioContext.close();
    audioContext = null;
    sourceNode = null;
    // 释放唤醒锁
    if (wakeLock) {
      wakeLock.release();
      wakeLock = null;
    }
  }; 
  recorder.start();
}

function saveRecordedAudio(blob){
  const url = URL.createObjectURL(blob);
  const audio = new Audio(url);
  audio.controls = true;
  document.body.appendChild(audio);
  audio.onload = () => URL.revokeObjectURL(url);
}

function stopRecording(){
  recorder.stop();
}

方案三：注册Media Session，提升后台优先级 #

通过Media Session API告诉Chrome这是一个媒体录制应用，让浏览器给予更高的后台运行优先级，减少被暂停的概率。

添加媒体会话配置：

// 页面加载时或录制前调用此函数
function setupMediaSession() {
  if ('mediaSession' in navigator) {
    navigator.mediaSession.metadata = new MediaMetadata({
      title: '语音备忘录录制',
      artist: '你的应用名称',
    });
    // 绑定停止录制的动作
    navigator.mediaSession.setActionHandler('stop', () => {
      stopRecording();
    });
  }
}

// 在beginCapture中调用setupMediaSession
async function beginCapture(){
  setupMediaSession();
  // 原有代码...
}

关键注意事项 #

• 必须使用HTTPS：所有后台相关API（Wake Lock、Media Session）仅在HTTPS环境下可用，HTTP页面无法使用。
• 兼容性检查：部分API可能在旧版Chrome中不支持，建议通过特性检测判断是否启用。
• 资源清理：录制结束后务必释放AudioContext、唤醒锁等资源，避免内存泄漏。

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