在现代 Web 应用程序中，语音搜索功能已经变得越来越普遍，正是因为语音技术的发展和用户对语音搜索方式的接受度增加。不过，为了让浏览器支持语音搜索，我们需要使用一些特定 API，这些 API 并不是在所有的浏览器中都能正常工作。web-voice-search 就是一个提供语音搜索支持的 npm 包，它在所有现代浏览器中都能正常运行。本文将会介绍如何使用这个包来构建语音搜索功能。
安装 npm 包
首先，我们需要在项目中安装 web-voice-search 包，在终端中运行下面的命令：
npm install web-voice-search
使用 web-voice-search
HTML
在 HTML 文件中，我们需要添加一个语音搜索的按钮，并向其中添加一些必要的属性。下面是一个示例代码：
-- -------------------- ---- -------
------- ----------------------------------
--------
----- ----------------- - -----------------------------------------------
-- ----------
-------------------------------------------------------- --------------- -
----- ------------ - -------------------------------
------------------ -------- -- --------------
---
---------JavaScript
在 JavaScript 文件中，我们需要销毁所有其他正在进行的语音搜索，然后启动新的语音搜索。下面是一个示例代码：
-- -------------------- ---- ------- ------ ----------- ---- ------------------- ----- -- - --- ------------- ------------------ ----- -- -------- --------- -------- -- --------- ----------- ----- -- -------- --- -- ---------- ----------- - --------------- - ------------------ -------- -- --------------- -- ----- ----------------- - ----------------------------------------------- -- -------------- ------------------------------------------- ---------- - ----------- ---
在这段代码中，我们通过创建 VoiceSearch 实例，添加 onDetect 事件监听，并启动语音搜索来实现语音搜索功能。
值得注意的是，我们设置了参数 enableAutoDestroy: true，这样就可以在启动新的语音搜索时销毁所有正在进行的语音搜索。此外，我们还设置了语音搜索的语言（language）以及关闭了连续语音搜索（continuous）。
结论
通过上述步骤，我们就可以为我们的 Web 应用程序添加语音搜索功能了。使用 web-voice-search npm 包可以使我们在所有现代浏览器中都能正常工作。希望这篇文章能够帮助您构建更好的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600f81e8991b448ddf05