Web Speech API：好用但不太常用的JS API

Web Speech API 是一种在 Web 应用程序中实现语音识别和语音合成的技术。虽然这个 API 在开发人员中并不像其他常用 API 那样广为人知，但它提供了许多强大的功能，可以增强网页的交互性和用户体验。
在 Web Speech API 中，有两个核心部分：SpeechRecognition API 和 SpeechSynthesis API。SpeechRecognition API 允许你的应用程序识别用户的语音输入，而 SpeechSynthesis API 则允许你的应用程序生成语音输出。
SpeechRecognition API
SpeechRecognition API 可以通过 SpeechRecognition 对象实现语音识别功能。以下是一个简单的示例，演示如何使用 SpeechRecognition API 识别用户的语音输入：

// 创建 SpeechRecognition 对象
var recognition = new SpeechRecognition();
// 开始识别语音
recognition.start();
// 监听语音输入
recognition.onresult = function(e) {
console.log(e.results[0][0].transcript); // 输出识别的文本
recognition.stop(); // 停止识别
};
// 处理错误
recognition.onerror = function(e) {
console.log('Error: ' + e.error);
recognition.stop(); // 停止识别
};

在这个示例中，我们首先创建了一个 SpeechRecognition 对象。然后，我们调用 start() 方法开始识别语音。当用户开始说话时，onresult 事件被触发，我们可以在事件处理函数中获取识别的文本。最后，我们可以在 onerror 事件处理函数中处理任何错误。
SpeechSynthesis API
SpeechSynthesis API 可以通过 SpeechSynthesisUtterance 对象和 speechSynthesis 对象实现语音合成功能。以下是一个简单的示例，演示如何使用 SpeechSynthesis API 生成语音输出：

// 创建 SpeechSynthesisUtterance 对象
var utterance = new SpeechSynthesisUtterance();
utterance.text = 'Hello, world!';
utterance.volume = 1; // 0 (静音) 到 10 (最大音量)之间的值
utterance.rate = 1; // 0.1 (最慢) 到 10 (最快)之间的值
utterance.pitch = 1; // 0 (最低) 到 2 (最高)之间的值
utterance.lang = 'en-US'; // 设置语音的语言
// 使用 speechSynthesis 对象合成语音
window.speechSynthesis.speak(utterance);

在这个示例中，我们首先创建了一个 SpeechSynthesisUtterance 对象，并设置了要合成的文本。然后，我们设置了语音的音量、速度、音调和语言。最后，我们调用 speechSynthesis 对象的 speak() 方法来合成语音。
实用示例
除了基本的语音识别和语音合成功能外，你还可以使用 Web Speech API 来实现更高级的功能。例如，你可以使用 SpeechRecognition API 来实现实时语音翻译功能，或者使用 SpeechSynthesis API 来实现语音导航或语音菜单等功能。下面是一个简单的实时语音翻译示例：
``javascript // 创建 SpeechRecognition 和 SpeechSynthesis 对象 var recognition = new SpeechRecognition(); var utterance = new SpeechSynthesisUtterance(); var translation = ''; var targetLanguage = 'zh-CN'; // 设置目标语言为中文简体 // 使用 Google Translate API 进行翻译（需要先注册并获取 API Key） function translate(text, targetLanguage) { fetch(https://translation.googleapis.com/language/translate/v2?q=${encodeURIComponent(text)}&target=${targetLanguage}&key=YOUR_API_KEY`)
.then(response => response.json())
.then(data => { translation = data.data.translations[0].translatedText; });
}
// 在用户说话时进行翻译和语音合成
recognition.onresult = function(e) {
translate(e.results[0][0].transcript, targetLanguage); // 将识别的文本翻译为目标语言
utterance.text = translation;