在前端开发中，偶尔需要使用到浏览器内置的提示音来提醒用户某些操作已经完成。然而在 HTML5 中并没有提供一个良好的 API 来控制浏览器的声音，这就需要我们使用一些第三方的库来实现该功能。其中，npm 包 browser-beep 就是一个非常不错的选择。本文将介绍如何使用 npm 包 browser-beep 来实现浏览器内置声音的播放。
安装
在项目文件夹中使用 npm 安装 browser-beep：
npm install browser-beep
或者在 HTML 页面中通过 CDN 来使用：
<script src="https://unpkg.com/browser-beep"></script>
使用
安装完成后，我们需要在 JavaScript 中引入 browser-beep：
const beep = require('browser-beep');或者在 HTML 页面中通过 window.browserBeep 来使用：
const beep = window.browserBeep;
接下来，我们可以使用 beep() 函数来播放声音：
// 播放一次“提示”的声音
beep('提示', 1);其中第一个参数是声音类型，可以是 alert、error notification、success 和 warning 中的一种，也可以自定义；第二个参数是声音的播放次数，可以是任意正整数，默认为 1 次。
如果需要自定义声音，我们可以提供一个 mp3 格式的音频文件的 URL：
// 播放自定义声音
beep('http://example.com/my-sound.mp3');示例代码
下面是一个简单的示例，先在 HTML 中引入 browser-beep，然后在 JavaScript 中使用 beep() 函数播放声音：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ----------
------- ----------------------------------------------
-------
------
------- --------------------------
--------
----- ---- - -------------------
-------------------------------------------------------- -- -- -
---------- ---
---
---------
-------
-------在上述示例中，我们点击按钮时会发出两次“提示”的声音。
总结
在日常开发中，提醒用户某些操作已完成是一个非常常见的需求。而使用浏览器内置声音来进行提示，就是一个比较简单、方便的解决方案。npm 包 browser-beep 就是一款可以帮助我们实现该功能的不错的库。本文介绍了使用方法和示例代码，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573d181e8991b448e9bfe