Chrome自动播放策略限制下，Tampermonkey后台音频告警方案咨询

Chrome的自动播放政策无法绕过，这是浏览器为避免音频滥用、提升用户体验设定的强制规则。以下是合规的替代方案：

方案1：提前激活AudioContext（部分场景有效） #

在用户首次与页面交互（点击、按键等）时，初始化并激活AudioContext，后续后台触发时可复用已激活的上下文：

let audioCtx;
const url = 'https://assets.mixkit.co/active_storage/sfx/1005/1005.wav';
let audioBuffer = null;

// 提前加载音频文件
GM.xmlHttpRequest({
  method: "GET",
  url: url,
  responseType: 'arraybuffer',
  onload: function(response) {
    audioBuffer = response.response;
  }
});

// 监听用户交互，激活AudioContext
function initAudioCtx() {
  if (!audioCtx) {
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  }
  if (audioCtx.state === 'suspended') {
    audioCtx.resume();
  }
  // 解绑事件，避免重复触发
  document.removeEventListener('click', initAudioCtx);
  document.removeEventListener('keydown', initAudioCtx);
}

document.addEventListener('click', initAudioCtx);
document.addEventListener('keydown', initAudioCtx);

function playAlarm() {
  if (!audioCtx || !audioBuffer) return;
  
  // 确保上下文处于激活状态
  if (audioCtx.state === 'suspended') {
    audioCtx.resume().then(() => playSound());
  } else {
    playSound();
  }

  function playSound() {
    audioCtx.decodeAudioData(audioBuffer).then(buffer => {
      let source = audioCtx.createBufferSource();
      source.buffer = buffer;
      source.connect(audioCtx.destination);
      source.start();

      setTimeout(() => playSound(), 10000 + Math.random()*2500);
    });
  }
}

注意：部分浏览器在标签页后台驻留较长时间后仍会暂停AudioContext，此方案无法保证100%生效。

方案2：使用浏览器通知API（推荐） #

利用浏览器桌面通知功能，通知自带的声音不受后台标签页限制，只要用户授权通知权限即可正常触发：

const alarmSoundUrl = 'https://assets.mixkit.co/active_storage/sfx/1005/1005.wav';

// 请求通知权限
async function requestNotificationPermission() {
  if (Notification.permission !== 'granted') {
    await Notification.requestPermission();
  }
}

// 页面加载时请求权限
requestNotificationPermission();

function triggerAlarmNotification() {
  if (Notification.permission !== 'granted') return;
  
  // 创建带声音的通知
  const notification = new Notification('监控告警', {
    body: '满足指定触发条件！',
    sound: alarmSoundUrl,
    requireInteraction: true // 保持通知直到用户关闭
  });

  // 点击通知切换到标签页
  notification.onclick = () => {
    window.focus();
    notification.close();
  };

  // 重复触发通知（模拟循环告警）
  setTimeout(triggerAlarmNotification, 10000 + Math.random()*2500);
}

此方案完全符合浏览器政策，后台标签页也能稳定触发带声音的告警通知。

方案3：切换标签页到前台后播放音频 #

通过强制切换标签页到前台，绕开后台播放限制，适合必须使用原生音频播放的场景：

let audioCtx;
const url = 'https://assets.mixkit.co/active_storage/sfx/1005/1005.wav';
let audioBuffer = null;

// 提前加载音频
GM.xmlHttpRequest({
  method: "GET",
  url: url,
  responseType: 'arraybuffer',
  onload: function(response) {
    audioBuffer = response.response;
  }
});

function playAlarm() {
  // 切换到当前标签页
  window.focus();
  
  if (!audioCtx) {
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  }
  
  if (audioCtx.state === 'suspended') {
    audioCtx.resume().then(() => playSound());
  } else {
    playSound();
  }

  function playSound() {
    audioCtx.decodeAudioData(audioBuffer).then(buffer => {
      let source = audioCtx.createBufferSource();
      source.buffer = buffer;
      source.connect(audioCtx.destination);
      source.start();

      setTimeout(playAlarm, 10000 + Math.random()*2500);
    });
  }
}

注意：此方案会强制打断用户当前操作，需谨慎使用。

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