在一些特定的应用场景中，我们可能需要在浏览器中播放一些简单的音频提示，例如游戏中的击中声、聊天应用中的消息提示等。本文将介绍如何使用JavaScript在浏览器中发出简单的“嘟嘟声”。
使用HTML5 Audio元素
HTML5引入了<audio>标签，可以很方便地在网页中播放音频文件。但是，如果我们只是需要发出简单的嘟嘟声，使用<audio>标签就有些“大材小用”了。下面我们介绍两种更加轻量级的方法。
使用Web Audio API
Web Audio API是一个底层的音频API，提供了非常丰富的音频处理功能。它可以让我们直接生成并播放简单的声音，包括噪声、方波等等。下面是一个简单的例子：
-- -------------------- ---- ------- -- ---------------- ----- -------- - --- -------------------- -- ----------------------------- -- ------------------ ----- ---------- - ---------------------------- -- ----------- --------------- - ------- -- ----------- -------------------------- - ----- -- --------- ----------------------------------------- -- ---- ------------------- -- ---- ------------- -- ------------------ ------
这段代码会在浏览器中发出一个持续1秒钟的1000Hz正弦波声音。我们可以通过修改frequency属性来改变音调，也可以使用其他类型的振荡器来产生不同的声音。
需要注意的是，Web Audio API只能在Chrome、Firefox、Safari等现代浏览器中使用，在IE、Edge等老旧浏览器中不可用。
使用AudioContext beep方法
HTML5标准中定义了一个名为AudioContext.prototype.beep的方法，可以直接在AudioContext上发出嘟嘟声。这个方法非常简单，只接受一个可选的参数duration，表示声音的持续时间（单位毫秒）。下面是一个例子：
const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // 发出一声持续500ms的嘟嘟声 audioCtx.beep(500);
这种方法非常方便，但是由于它并不是标准JS API，因此不是所有浏览器都支持。目前只有Chrome和Firefox支持这个方法。
总结
本文介绍了两种在前端使用JavaScript发出嘟嘟声的方法。Web Audio API提供了更加灵活的音频处理功能，但是只能在现代浏览器中使用；而AudioContext.prototype.beep方法非常简单方便，但是兼容性不太好。在实际开发中需要根据具体情况选择合适的方法。
希望本文能对广大前端工程师有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9385
