跨浏览器HTML5 JavaScript实现20ms单次方波嘀嗒音技术求助

嘿，这事儿用浏览器原生的Web Audio API就能搞定，完全不需要任何外部库，代码短得很，而且在Chrome、Firefox、Opera里都能正常运行！

核心思路就是直接用浏览器的音频上下文生成方波，精准控制播放时长。给你看最简洁的实现：

function play20msClick() {
  // 兼容不同浏览器的音频上下文
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = ctx.createOscillator();
  
  oscillator.type = 'square'; // 指定方波类型
  oscillator.frequency.setValueAtTime(800, ctx.currentTime); // 设置嘀嗒声频率，800Hz听起来很舒服
  
  // 连接到输出设备（扬声器）
  oscillator.connect(ctx.destination);
  
  // 启动播放，20毫秒后自动停止
  oscillator.start();
  oscillator.stop(ctx.currentTime + 0.02);
}

几个关键细节要注意： #

• 浏览器自动播放限制：现在主流浏览器都要求音频必须由用户交互触发（比如点击按钮），所以你得把这个函数绑定到用户操作上，比如：

  document.getElementById('clickButton').addEventListener('click', play20msClick);
  

• 频率调整：如果觉得800Hz的声音不合适，直接改frequency.setValueAtTime里的数值就行，比如1000Hz会更尖锐一点。
• 兼容性：webkitAudioContext是为了兼容旧版Chrome，现在大部分新浏览器已经支持标准的AudioContext了，但加上这个前缀能覆盖更多场景。

这个实现和你说的DOS时代操作硬件的思路本质是一样的——直接生成原始音频波形，只不过现在是通过浏览器提供的API来做，完全不需要依赖任何外部资源。

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