实现语音文字互转

Web Speech API

Web Speech API 是一组浏览器 API，允许开发者在 Web 应用程序中集成语音识别和语音合成功能。这些 API 的引入标志着浏览器开始支持本地端的语音交互能力，不仅改善了用户体验，还为开发者提供了更多创新的可能性。

SpeechSynthesis（语音合成）

基础使用

开始播放, 播放完自动结束

const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance();

// 设置语音属性
utterance.text = '这里设置播放的内容';
// utterance.lang = 'zh-CN'; // 不设置在中英文混合时更流畅
utterance.volume = 1; // 音量，区间范围是`0`到`1`，默认是`1`。
utterance.rate = 1; // 语速，默认值是`1`，范围是`0.1`到`10`，表示语速的倍数，例如`2`表示正常语速的两倍。
utterance.pitch = 1; // 音调，范围从`0`（最小）到`2`（最大）。默认值为`1`。

// 开始播放
synth.speak(utterance);

手动结束, 调用 cancel() 方法

synth.cancel();

方法

• speak(utterance) 开始播放。
• cancel() 结束播放。
• pause() 暂停播放。
• resume() 恢复暂停的语音。

事件监听

• onstart 语音合成开始时候的回调。
• onpause 语音合成暂停时候的回调。
• onresume 语音合成重新开始时候的回调。
• onend 语音合成结束时候的回调。

SpeechRecognition（语音识别）

基础使用

// 创建语音识别对象
const recognition = new webkitSpeechRecognition();
recognition.lang = 'en-US'; // 设置识别语言为英语
recognition.onresult = function(event) {
   // 获取识别结果文本
  const transcript = event.results[0][0].transcript;
  console.log('识别结果:', transcript);
};

// 默认情况下，语音识别在识别到一段语音后会停止。设置为连续语音识别模式
recognition.continuous = true;

recognition.start(); // 开始识别

在这个示例中，首先实例化了SpeechRecognition对象。通过onresult事件监听识别成功的结果，当识别成功时，从事件对象中获取到识别出的文本并打印出来。最后调用start方法开启语音识别功能，此时浏览器会请求用户授权使用麦克风。

属性

• grammars 用于存储一组语法规则，可以通过 addFromString 方法添加语法规则。

• lang 设置或获取语音识别的语言

• interimResults 如果设置为 true，则在识别过程中会提供临时结果。如果为 false，则只提供最终结果

• maxAlternatives 设置语音识别返回的替代结果的最大数量。默认值为 1，表示只返回最可能的结果

• continuous 如果设置为 true，则识别会持续运行直到显式停止。如果为 false，识别会在单次语音输入后自动停止

方法

• start() 开始识别。
• stop() 停止识别。
• abort() 结束识别。

事件监听

• onresult 当识别结果可用时触发的事件处理程序。事件对象的 results 属性包含识别结果
• onaudiostart 当开始录制音频时触发的事件处理程序
• onsoundstart 当检测到声音时触发的事件处理程序
• onspeechstart 当检测到用户开始说话时触发的事件处理程序
• onspeechend 当用户停止说话时触发的事件处理程序
• onaudioend 当音频录制停止时触发的事件处理程序
• onend 当语音识别结束时触发的事件处理程序
• onerror 当语音识别发生错误时触发的事件处理程序。事件对象的 error 属性包含错误信息
• onnomatch 当语音识别没有匹配到任何结果时触发的事件处理程序
• onsoundend 当检测到的声音停止时触发的事件处理程序