JS/jQuery实现Chrome环境下无需用户干预播放短音频的方案咨询

问题原因 #

Chrome 默认禁止非用户主动交互场景下自动播放音频，属于浏览器的标准安全策略，针对你的内部特定使用场景，有以下可行方案：

方案1：利用已有合法交互提前解锁音频权限（无需修改浏览器配置） #

你现有提交按钮的点击事件属于用户主动交互，本身就有音频播放权限，可以在这个交互中提前把所有需要用到的音频对象解锁，后续的focusin/focusout事件就可以正常播放音频：

// 页面加载完成后预创建所有需要的音频对象，不要每次触发事件重复创建
const submitChime = new Audio('/sounds/chime.wav');
const scanBeep = new Audio('/sounds/scan-beep.wav');

// 提交按钮点击事件
jQuery('#weight_submit').click( () => {
  // 第一次点击时静音播放所有音频，完成权限解锁
  [submitChime, scanBeep].forEach(audio => {
    audio.volume = 0;
    audio.play().catch(() => {});
  });
  // 正常播放提交提示音
  submitChime.volume = 1;
  submitChime.currentTime = 0;
  submitChime.play();
});

// 条码输入框失焦播放提示音，权限解锁后可正常触发
jQuery('#barcode_input').on('focusout', () => {
  // 可选：加条码长度校验，避免误输入触发提示音
  if (this.value.length >= 8) {
    scanBeep.currentTime = 0;
    scanBeep.play().catch(err => console.log('播放失败', err));
  }
});

方案2：手动配置浏览器权限（一劳永逸，适合固定工作站） #

因为是内部固定使用的工作站，直接给站点开放音频播放权限即可，不需要修改代码：

• 打开Chrome浏览器，地址栏输入chrome://settings/content/sound回车访问
• 在「允许播放声音」分组下点击「添加」按钮，输入你内部应用的访问地址后保存
• 配置完成后，该站点的所有音频播放不受交互逻辑限制，focusin/focusout事件可以直接触发播放

优化建议 #

• 提前初始化音频对象复用，避免每次触发事件重复创建实例导致的播放延迟和内存占用
• 可根据条码规则加简单的内容校验，避免误输入、误失焦触发无效提示音

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