如何实现按钮每次点击/触摸均触发蜂鸣效果？

需要实现一个HTML应用，要求每次按钮点击/触摸都触发蜂鸣效果，但测试中出现失效问题：

• 桌面端最新Chrome浏览器：快速点击按钮100次后蜂鸣失效
• Android 11/8的Zebra Enterprise Browser：触摸10次后蜂鸣停止
  控制台仅打印"beep"但无蜂鸣，无任何警告或错误。

原测试代码 #

<html>
<head>
<script>
function beep () {
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)()
  const oscillator = audioCtx.createOscillator()
  const gainNode = audioCtx.createGain()
  oscillator.connect(gainNode)
  gainNode.connect(audioCtx.destination)
  gainNode.gain.value = 1 // volume;
  oscillator.frequency.value = 3000 // frequency;
  oscillator.type = 'sine' // type;
  console.log('beep')
  oscillator.start()
  setTimeout(
    function () {
      oscillator.stop()
    },
    70 // duration
  )
}
</script>
</head>

<body>

<button type="button" onclick="beep()">
+
</button>
</body>
</html>

问题根源 #

每次调用beep()都会创建一个新的AudioContext实例，而浏览器对音频上下文的创建数量有限制（不同浏览器/设备限制阈值不同）。当达到上限后，新的AudioContext无法正常初始化工作，导致蜂鸣失效。

修复方案 #

复用单个AudioContext实例，每次蜂鸣仅创建新的振荡器和增益节点，并在使用完毕后正确清理资源。

修复后的代码 #

<html>
<head>
<script>
// 全局复用单个AudioContext实例
let audioCtx = null;

function beep () {
  // 第一次调用时初始化AudioContext，或处理被挂起的情况
  if (!audioCtx) {
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  } else if (audioCtx.state === 'suspended') {
    // 处理浏览器自动挂起音频上下文的情况（比如长时间无交互）
    audioCtx.resume();
  }

  const oscillator = audioCtx.createOscillator();
  const gainNode = audioCtx.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioCtx.destination);
  
  gainNode.gain.value = 1; // 音量
  oscillator.frequency.value = 3000; // 频率
  oscillator.type = 'sine'; // 波形类型

  console.log('beep');
  oscillator.start();
  
  // 使用振荡器的onended事件清理资源，避免内存泄漏
  oscillator.onended = () => {
    oscillator.disconnect();
    gainNode.disconnect();
  };

  setTimeout(() => {
    oscillator.stop();
  }, 70); // 蜂鸣时长
}
</script>
</head>

<body>
<button type="button" onclick="beep()">+</button>
</body>
</html>

关键改进说明 #

• 复用AudioContext：全局只创建一个AudioContext实例，彻底避免超出浏览器的实例数量限制
• 处理上下文挂起：浏览器会自动挂起长时间未使用的音频上下文，新增resume()调用恢复上下文状态
• 资源清理：通过oscillator.onended事件在蜂鸣结束后断开节点连接，避免内存泄漏
• 简化代码结构：使用箭头函数优化定时器写法，提升代码可读性

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