Iphone (Safari) 上的音频标签

Question

我正在制作一个条形码扫描网络应用程序。我选择QuaggaJS作为条码扫描库。我想在扫描条形码时播放蜂鸣声。我使用了

audio

标签并使用 JQuery 在检测到条形码时播放声音。它适用于所有浏览器，例如 Chrome、Edge、FireFox，但在 Safari 上效果不佳。其他事件也会意外触发

play()

。有时有效，有时无效。

代码：

音频

<audio id="beepSound" controls>
    <source src="beep.mp3" type="audio/mp3"/>
    <source src="beep.ogg" type="audio/ogg" />
</audio>

JQuery：

Quagga.onDetected(function (result) {
    $('#beepSound').get(0).load();
    $("#beepSound").get(0).play();
    Quagga.stop();
});

我已经尝试了 StackOverflow 上针对此问题提供的大多数解决方案，但似乎都不起作用。甚至尝试使用这个Html 5 Audio在iPhone safari浏览器中无法工作但它不起作用。

Answer 1

好的，伙计们，这里是让这个嘟嘟声发生的 JS 函数：

  function playBeepSound() {
    const AudioContext = window.AudioContext || window.webkitAudioContext;
    const audioContext = new AudioContext();
    const oscillator = audioContext.createOscillator();
    oscillator.type = 'sine'; //other waveforms (e.g., 'square', 'sawtooth')
    oscillator.frequency.setValueAtTime(1000, audioContext.currentTime); // Adjust frequency as needed
    oscillator.connect(audioContext.destination);
    oscillator.start();
    oscillator.stop(audioContext.currentTime + 0.1); // Play for 0.1 seconds
}

调用函数：

Quagga.onDetected(function (result) {
   playBeepSound()
   Quagga.stop();
});