DOMException: play() failed because the user didn‘t interact with the document first

报错原因是chrome新特性，内容大致意思是开发者不能利用手中权限去给用户造成噪音干扰，首次加载页面需要用户和audio/video进行交互

需求如下
实时刷新告警列表，保证用户获取到最新告警消息，当有新的告警消息时，响警报铃

解决方案

当用户首次进入页面时给提示用户启用告警铃声

let audioPlay = document.getElementById('myaudio')

audioPlay.play()

setTimeout(() => {
  audioPlay.pause()
  audioPlay.load()
}, 10)

首次点击与audio交互，设置10毫秒用户也并不会听到铃声，再次使用时设置告警时间即可

其它解决方案如下：

• 准备工作

// 检查自动播放支持情况
const promise = document.querySelector('video').play();
if (promise !== undefined) {
  promise.catch(error => {
    // 自动播放被阻止
    showPlayButton(); // 显示播放按钮
  }).then(() => {
    // 自动播放成功
  });
}

• 方案1

// 在用户点击/触摸等交互事件后播放音频
document.addEventListener('click', function() {
  const audio = new Audio('sound.mp3');
  audio.play().catch(e => console.log('播放失败:', e));
}, { once: true }); // 只监听一次

• 方案2

// 静音自动播放+用户交互后取消静音
const video = document.querySelector('video');
video.muted = true; // 必须静音才能自动播放
video.play().then(() => {
  // 用户交互后取消静音
  document.addEventListener('click', () => {
    video.muted = false;
  }, { once: true });
});