利用vue Web Audio API给网页JS交互增加声音

<script lang="ts">

export default class nlSensor_Buzzer extends devicebase {
  public audioCtx = null;// 音频
  // 如果需要连续播放多个简短的“哔”声，则可以循环调用playBeeper方法，并根据实际需求设定间隔。
  public playBeeper(): void {
    // 使用固定的高频值模拟蜂鸣器尖锐的声音，例如4kHz
    const frequency = 4000;
    // 创建振荡器节点并设置为方波（square wave），蜂鸣器声音往往比较接近方波
    const oscillator = this.audioCtx.createOscillator();
    oscillator.type = "square";
    // 创建并连接增益节点
    const gainNode = this.audioCtx.createGain();
    oscillator.connect(gainNode);
    gainNode.connect(this.audioCtx.destination);
    // 立即从静音开始，并快速线性提升到最大音量
    gainNode.gain.setValueAtTime(0, this.audioCtx.currentTime);
    gainNode.gain.linearRampToValueAtTime(1, this.audioCtx.currentTime + 0.001);
    // 设置振荡器频率
    oscillator.frequency.value = frequency;
    // 开始播放，并在非常短的时间内停止（比如0.1秒）
    oscillator.start(this.audioCtx.currentTime);
    oscillator.stop(this.audioCtx.currentTime + 0.1);
    // 可以考虑添加额外的回声或混响效果，但不是所有蜂鸣器都有这些特性
  }

  public init(): void {
    const that = this;
    if (!window.AudioContext) {
      alert("当前浏览器不支持Web Audio API");
      return;
    }
    this.audioCtx = new AudioContext();

  }
  public mounted() {
    this.init();
  }
}
</script>

参考链接：利用HTML5 Web Audio API给网页JS交互增加声音 « 张鑫旭-鑫空间-鑫生活