1. Web Speech API 概述
1.1. 简介
Web Speech API 是 W3C 推出的 JavaScript API，为网页赋予语音交互能力。
1.2. 核心功能
Web Speech API 由 SpeechSynthesis（语音合成）与 SpeechRecognition（语音识别）两大支柱构成。语音合成实现文本到语音的智能转换，让网页 "开口说话"；语音识别则可精准捕捉语音指令并转化为文本，为用户输入开辟新径。
1.3. 参考文档
Web Speech API - Web API | MDN
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API
1.4. 限制
作为前沿实验性技术，Web Speech API 虽前景广阔，但在实际应用中需审慎关注浏览器兼容性。不同浏览器对 API 支持程度参差不齐，开发与部署前务必依官方兼容性表格严格核验，以防功能失常，确保应用稳健运行。
api.SpeechRecognition 浏览器兼容性https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API#api.speechrecognitionapi.SpeechSynthesis 浏览器兼容性https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API#api.speechsynthesis
2. Web Speech API 功能介绍与代码示例
2.1. 语音合成功能（SpeechSynthesis）
2.1.1. 语音合成示例
以下是一个最基本的使用 SpeechSynthesis 进行语音合成的代码示例：
javascript
// 获取语音合成对象
const synth = window.speechSynthesis;
// 创建一个语音合成实例，并设置要朗读的文本
const utterance = new SpeechSynthesisUtterance('这是一个简单的语音合成测试。');
// 触发语音合成并播放
synth.speak(utterance);在这个示例中，首先通过 window.speechSynthesis 获取到语音合成对象 synth ，然后创建了 SpeechSynthesisUtterance 对象并传入要朗读的文本，最后调用 synth.speak() 方法启动语音合成并播放。
2.1.2. 设置语音参数示例
我们可以对语音合成的各种参数进行设置，如语速、语调、音量等。
javascript
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance('你好，今天过得怎么样？');
// 设置语速，取值范围通常在 0.1 到 10 之间，这里设置为 0.8 倍速
utterance.rate = 0.8;
// 设置语调，取值范围一般在 0 到 2 之间，这里设为 1.5
utterance.pitch = 1.5;
// 设置音量，取值范围从 0 到 1，这里设为 0.5
utterance.volume = 0.5;
synth.speak(utterance);通过以上代码，可以根据需求灵活调整语音的表现形式，以适应不同的应用场景，比如在儿童教育类应用中可以适当提高语调，使其更生动有趣。
2.1.3. 选择特定语音示例
浏览器通常支持多种语音类型，我们可以根据语言或语音名称等选择特定的语音来进行合成。
javascript
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance('欢迎来到北京。');
// 获取语音列表
const voices = synth.getVoices();
// 假设我们要选择中文普通话语音
for (let i = 0; i < voices.length; i++) {
if (voices[i].lang === 'zh-CN' && voices[i].name.includes('普通话')) {
utterance.voice = voices[i];
break;
}
}
synth.speak(utterance);这段代码先获取了语音列表，然后遍历列表找到符合要求（中文普通话）的语音，并将其应用到utterance对象中，从而实现特定语音的选择。
2.1.4. 语音合成事件监听示例
我们还可以监听语音合成过程中的各种事件，比如语音开始播放、暂停、结束等事件。
javascript
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance('这是一段有事件监听的语音合成。');
// 语音开始播放事件监听
utterance.onstart = function() {
console.log('语音开始播放');
};
// 语音暂停事件监听
utterance.onpause = function() {
console.log('语音暂停');
};
// 语音结束事件监听
utterance.onend = function() {
console.log('语音结束');
};
synth.speak(utterance);通过这些事件监听，我们可以在语音合成的不同阶段执行相应的操作，例如在语音结束后自动切换到下一段文本的合成，或者在语音暂停时显示暂停图标等。
2.1.5. 排队语音合成示例
当有多个语音合成任务时，可以将它们排队依次进行合成。
javascript
const synth = window.speechSynthesis;
const utterance1 = new SpeechSynthesisUtterance('第一个语音任务。');
const utterance2 = new SpeechSynthesisUtterance('第二个语音任务。');
// 将第一个语音任务添加到队列
synth.speak(utterance1);
// 当第一个任务结束后，添加并播放第二个任务
utterance1.onend = function() {
synth.speak(utterance2);
};这样就可以有序地处理多个语音合成需求，在一些如语音导航应用中，连续播报多个导航指令时就可以采用这种排队合成的方式。
2.2. 语音识别功能（SpeechRecognition）
2.2.1. 语音识别示例
javascript
// 创建语音识别对象
const recognition = new SpeechRecognition();
// 定义语音识别成功的回调函数
recognition.onresult = function(event) {
// 获取识别结果
const result = event.results[0][0].transcript;
console.log('识别结果: ', result);
};
// 启动语音识别
recognition.start();在这个示例中，首先实例化了SpeechRecognition对象。通过onresult事件监听识别成功的结果，当识别成功时，从事件对象中获取到识别出的文本并打印出来。最后调用start方法开启语音识别功能，此时浏览器会请求用户授权使用麦克风。
2.2.2. 设置语音识别语言示例
javascript
const recognition = new SpeechRecognition();
recognition.onresult = function(event) {
const result = event.results[0][0].transcript;
console.log('识别结果: ', result);
};
// 设置识别语言为英语（美国）
recognition.lang = 'en-US';
recognition.start();这里展示了如何设置语音识别的语言。通过指定lang属性为特定的语言代码，如en-US表示美国英语，就可以让语音识别针对特定语言进行识别，提高识别的准确性和效率。
2.2.3. 连续语音识别示例
javascript
const recognition = new SpeechRecognition();
recognition.onresult = function(event) {
const result = event.results[0][0].transcript;
console.log('识别结果: ', result);
};
// 设置为连续语音识别模式
recognition.continuous = true;
recognition.start();默认情况下，语音识别在识别到一段语音后会停止。但在某些场景下，如实时语音翻译或者长时间的语音指令输入，需要连续识别语音。通过将continuous属性设置为true，就可以开启连续语音识别功能，这样语音识别会持续监听麦克风输入并进行识别。
2.2.4. 语音识别错误处理示例
javascript
const recognition = new SpeechRecognition();
recognition.onresult = function(event) {
const result = event.results[0][0].transcript;
console.log('识别结果: ', result);
};
// 定义语音识别错误的回调函数
recognition.onerror = function(event) {
console.log('语音识别错误: ', event.error);
};
recognition.start();在语音识别过程中，可能会由于网络问题、麦克风故障或者语音不清晰等原因导致识别错误。通过onerror事件监听，可以捕获到错误信息并进行相应的处理，例如提示用户检查麦克风或者网络连接。
2.2.5. 语音识别结果中间处理示例
javascript
const recognition = new SpeechRecognition();
// 当识别出部分结果时的回调函数
recognition.onnomatch = function(event) {
console.log('部分识别结果: ', event.results[0][0].transcript);
};
recognition.onresult = function(event) {
const result = event.results[0][0].transcript;
console.log('最终识别结果: ', result);
};
recognition.start();有时候，语音识别可能不会一次性得出完整准确的结果，而是先有一些中间的、不太确定的结果。通过onnomatch事件监听，可以获取到这些中间结果并进行适当的处理，比如在语音搜索应用中，可以先显示一些可能的搜索建议，随着识别的进行再更新为最终准确的搜索结果。
2.2.6. 语音识别暂停与恢复示例
javascript
const recognition = new SpeechRecognition();
recognition.onresult = function(event) {
const result = event.results[0][0].transcript;
console.log('识别结果: ', result);
};
// 暂停语音识别
function pauseRecognition() {
recognition.stop();
}
// 恢复语音识别
function resumeRecognition() {
recognition.start();
}
recognition.start();在某些场景下，可能需要暂停和恢复语音识别。例如在语音输入过程中有其他重要操作需要优先处理，就可以调用stop方法暂停语音识别，之后再调用start方法恢复识别，为用户提供更灵活的交互控制。
3. Web Speech API 应用
3.1. 语音合成的实际应用
单词发音工具 - Labs100 - Web工具测试小站在线单词发音工具，支持多种语音和语速调节，帮助您提高发音准确度https://www.labs100.com/features/discovery/wordsounderlabs100.com上面的单词发音工具，实现方案很简单：
- 语音列表： 参考上述"2.1.3. 选择特定语音示例"
- 语速选择： 参考上述"2.1.2. 设置语音参数示例"