JS HTML 播放哔声

在网站中加入声音效果可以增强用户交互体验，以下介绍如何使用 JavaScript 和 HTML 播放哔声。

HTML

在 HTML 中加入以下代码：

<audio id="beep">
  <source src="beep.mp3" type="audio/mpeg">
  <source src="beep.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

其中，<source> 标签用于提供多个音频类型的兜底支持，同时 id 属性用于 JavaScript 中控制该音频元素。

JavaScript

首先需要获取音频元素对象：

const beep = document.getElementById('beep');

然后要播放哔声，只需调用音频元素对象的 play() 方法即可：

beep.play();

完整代码：

const beep = document.getElementById('beep');
beep.play();

自定义哔声

可以使用在线音频编辑器 Audacity 进行音频编辑，或者直接使用在线生成器生成哔声，例如 Online Tone Generator。

另外，可以在 JavaScript 中使用 AudioContext 和 OscillatorNode 对象自定义生成一段哔声，具体代码如下：

const context = new AudioContext();
const oscillator = context.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.value = 1000;
oscillator.connect(context.destination);
oscillator.start();
oscillator.stop(context.currentTime + 0.5);

上面的代码生成了一段 500ms 长的正弦波哔声，可以通过调节 frequency 属性和 currentTime 参数自定义生成不同频率和时长的哔声。

结论

使用 JS 和 HTML 播放哔声非常简单，只需引入音频元素和调用 play() 方法即可。同时，我们还可以自定义生成哔声以实现更丰富的效果。