最新Chrome桌面版更新致SoundJS无法播放音频，如何通过用户交互恢复？

当然没问题！Chrome的这个自动播放限制就是为了避免网页私自播放音频打扰用户，只要借助用户主动触发的交互（比如点击、键盘按键、触摸操作），完全能合法恢复SoundJS的音频功能，或者激活被暂停的AudioContext。

下面是具体的实现思路和代码示例：

核心实现步骤 #

• 首先监听一个用户主动触发的事件（比如页面点击），在事件回调里处理AudioContext的恢复或者SoundJS的初始化：

// 绑定页面点击事件，确保只触发一次
document.addEventListener('click', function handleAudioResume() {
  // 先移除事件监听，避免重复触发
  document.removeEventListener('click', handleAudioResume);

  // 处理已暂停的AudioContext
  if (createjs.Sound.context && createjs.Sound.context.state === 'suspended') {
    createjs.Sound.context.resume()
      .then(() => {
        console.log('AudioContext已成功恢复');
        // 恢复后即可正常播放音频
        createjs.Sound.play('yourSoundId');
      })
      .catch(err => {
        console.error('恢复AudioContext失败:', err);
      });
  } 
  // 如果SoundJS还未初始化，就在用户交互时完成初始化
  else if (!createjs.Sound.initialized) {
    createjs.Sound.initializeDefaultPlugins();
    // 注册并加载音频资源
    createjs.Sound.registerSound('path/to/your/audio.mp3', 'yourSoundId');
    // 资源加载完成后即可播放
    createjs.Sound.on('fileload', function() {
      createjs.Sound.play('yourSoundId');
    });
  }
}, { passive: true });

关键注意点 #

• 必须在用户交互回调内操作：Chrome只认可用户主动触发的事件（点击、按键、触摸等）来解锁音频播放，定时器、自动执行的脚本都无法绕过这个限制。
• 检查AudioContext状态：通过createjs.Sound.context.state判断是否为suspended，只有这种状态下调用resume()才有效。
• 初始化时机：如果你的SoundJS还没完成初始化，也把初始化逻辑放在用户交互事件里，避免一开始就触发浏览器的警告。
• 复用恢复状态：只要第一次交互成功恢复了AudioContext，后续的音频播放操作就都能正常进行，不需要每次交互都重复处理。

除了点击事件，你也可以根据页面场景选择keydown（键盘按键）、touchstart（触摸开始）等其他合法的用户交互事件，效果是一样的。

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