随着移动设备的普及，PWA（Progressive Web App）应用越来越受欢迎。Web Speech API 是 HTML5 新增的语音识别和语音合成的 API，借助于它，我们可以为我们的 PWA 应用添加语音操作的功能。本文将详细介绍如何使用 Web Speech API 开发 PWA 应用，并提供示例代码。
Web Speech API 概述
Web Speech API 分为两部分：语音识别和语音合成。
语音识别通过 microphone 对象来获取音频数据并转换成文本，并将结果传递给监听器。
语音合成接受一个字符串并将其转换为音频输出，可用于朗读文本或生成声音。
Web Speech API 目前主要支持 chrome 和 firefox 浏览器，如需支持其它浏览器需要使用第三方的语音库。
使用 Web Speech API
1. 检查浏览器是否支持 Web Speech API
在使用 Web Speech API 之前，需要检查浏览器是否支持该 API。
if (!("webkitSpeechRecognition" in window)) {
// 不支持语音识别
}
if (!("speechSynthesis" in window)) {
// 不支持语音合成
}2. 配置语音识别对象
在语音识别之前，需要创建语音识别对象，并配置相关属性。
const recognition = new webkitSpeechRecognition(); recognition.continuous = false; // 非连续模式 recognition.interimResults = true; // 获取临时结果
以上代码配置语音识别对象，设置了两个属性。continuous 属性设置为 false 表示语音识别只进行一次，interimResults 属性是获取实时的部分结果。
3. 创建监听器
语音识别结束后，需要将结果传递给监听器处理。下面是一个示例监听器的代码：
recognition.onresult = function(event) {
const results = event.results;
for (let i = event.resultIndex; i < results.length; i++) {
if (results[i].isFinal) {
console.log(results[i][0].transcript); // 文本结果
}
}
};以上代码创建了一个监听器，当语音识别结束后，将结果传递给监听器处理。如果结果是最终结果，则将识别结果输出到控制台。
4. 开始语音识别
通过调用语音识别对象的 start 方法，可以开始进行语音识别。
recognition.start();
5. 配置语音合成对象
在语音合成之前，需要创建语音合成对象，并配置相关属性。
const synth = window.speechSynthesis; const utterance = new SpeechSynthesisUtterance(); utterance.text = "Hello, world!"; // 设置要朗读的文本 synth.speak(utterance); // 开始朗读
以上代码创建了一个语音合成对象，并设置要朗读的文本为 Hello, world!，最后通过调用 speak 方法开始朗读。
示例代码
下面是一个使用 Web Speech API 开发的 PWA 应用的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----------- ---------------
--------
------------------------ - ------------------------ -- -------------------------------
-- --------------------------- -
------------------------------------------ -
-------- --- ---------- -- ---------------------------------------------- -- -- --------------------------------------------------- -----------
- ---- -
----- ----------- - --- ---------------------------
---------------------- - ------
-------------------------- - -----
-------------------- - --------------- -
--- ------------------ - ---
--- ---------------- - ---
--- ---- - - ------------------ - - --------------------- ---- -
-- -------------------------- -
---------------- -- ------------------------------ - -------
- ---- -
------------------ -- -------------------------------
-
-
-------------------------------------------- - -------------------
------------------------------------------ - -----------------
-
------------------- - --------------- -
------------------------------------------ - ------ -------- -- ------------ - - ------------
-
---------------------------------------------------------- ---------- -
--------------------
---
-
---------
-------
-------- -
----------- -----
-
------ -
----------- -----
------ ----
-
--------
-------
------
------- -------------------------
----------- -------------
---- ----------------------
--------- -------------
---- --------------------
---- --------------------
-------
-------以上代码实现的是一个语音识别的功能。当点击 Start 按钮后，开始进行语音识别。识别出的临时结果会显示在 Interim Results 中，最终结果会显示在 Final Results 中。
总结
Web Speech API 为我们提供了一个利用语音识别和语音合成的 API，借助于它我们可以给我们的 PWA 应用添加语音操作的功能。本文详细介绍了如何使用 Web Speech API 以及提供了示例代码。希望本文能够对你在开发 PWA 应用时的语音识别和语音合成方面提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64545f28968c7c53b084bdaf