web系列之Web Speech语音处理

1. Web Speech是什么

Web Speech API 使你能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。

2. API说明

2.1 SpeechSynthesis语音合成

要进行语音输出，需要创建一个 SpeechSynthesisUtterance 对象，并设置文字内容和其他属性：

2.1.1 基本属性

lang 获取并设置话语的语言
pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
text 获取并设置说话时的文本
voice 获取并设置说话的声音
volume 获取并设置说话的音量

2.1.2 监听事件

onstart 开始合成
onend 合成结束
onerror 合成错误
onpause 暂停
onresume 恢复暂停
onboundary 在句子或单词边界

2.1.3 实例方法

speak 将对应的实例添加到语音队列中
cancel 删除队列中所有的语音.如果正在播放,则直接停止
pause 暂停语音
resume 恢复暂停的语音
getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效

2.2 SpeechRecognition 语音识别

2.2.1 基本属性

SpeechRecognition对象的属性，用于设置语音识别的参数。

grammars：设置识别语法的URL，可以通过指定URL来限定语音识别的结果，只识别特定语法的单词或短语。
continuous：设置是否持续进行语音识别，默认值为false。如果将其设置为true，语音识别将持续监听用户的语音输入，而不是在识别到结果后自动停止。
lang：设置期望的语言或语言区域。可以使用语言和区域的ISO 639-1和ISO 3166-1标准进行设置，例如"en-US"表示英语（美国），"zh-CN"表示中文（中国）。
interimResults：设置是否返回中间识别结果，默认值为false。如果将其设置为true，在识别过程中会持续返回中间的识别结果，而不仅仅在识别完成后返回最终结果。
maxAlternatives：设置返回的最大识别结果数，默认值为1。如果需要获取多个可能的识别结果，可以将其设置为一个大于1的数值。

2.2.2 监听事件

以下是SpeechRecognition对象的一些常见事件说明：

audioend：当音频输入结束时触发，表示不再接收音频数据。
audiostart：在开始处理音频数据之前触发，表示开始接收音频输入。
end：当SpeechRecognition实例停止监听后触发。
error：在处理期间发生错误时触发。
nomatch：在没有找到匹配的语音输入时触发。
result：在获取到语音输入结果时触发，可以通过event.results获取识别结果。
soundend：在声音输入结束时触发。
soundstart：在开始处理声音输入时触发。
speechend：当语音输入结束时触发。
speechstart：在开始处理语音输入时触发。
start：当SpeechRecognition实例开始监听时触发。

2.2.3 实例方法

start 开始语音识别监听，开始接收和处理语音输入
stop 停止语音识别监听，不再接收和处理语音输入
abort 将当前的语音识别操作中止，并且不触发任何结果事件

3. 使用

Speech Synthesis:

js 复制代码

<template>
    <div ref="content">
        Web Speech API 是一组用于实现语音输入和语音输出的 API。它包含两个主要的部分，即 SpeechRecognition 和 SpeechSynthesis。
    </div>
    <a-slider v-model:value="percent" :min="0" :max="100" />percent: {{ percent }}%
    <a-button @click="startSpeech" type="primary"> 朗读 </a-button>
    <a-button @click="cancel"> 取消朗读 </a-button>
    <a-button @click="pauseSpeech"> 暂停 </a-button>
    <a-button @click="resumeSpeech"> 继续 </a-button>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const percent = ref(0)
const content = ref()
const startSpeech = () => {
    const msg = new SpeechSynthesisUtterance()
    msg.text = content.value.innerText
    msg.volume = 1; // 声音的音量，区间范围是0到1，默认是1。
    msg.rate = 1;// 设置播放语速，范围：0.1 - 10之间    正常为1倍播放
    msg.pitch = 1; // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。
    msg.lang = 'zh-CN'; // 使用的语言，字符串， 例如："zh-cn"
    window.speechSynthesis.speak(msg)
    // 控制进度
    msg.onboundary = (event) => {
        percent.value = event.charIndex / msg.text.length * 100
    }
}

const cancel = () => {
    window.speechSynthesis.cancel()
}

const pauseSpeech = () => {
    window.speechSynthesis.pause()
}

const resumeSpeech = () => {
    window.speechSynthesis.resume()
}
</script>

Speech Recognition:

vue 复制代码

const SpeechRecognition =
  window.SpeechRecognition ?? window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.start();
recognition.onresult = (event) => {
  const speechToText = event.results[0][0].transcript;
  console.log(speechToText);
};

4. 总结

Web Speech API 是一组用于实现语音输入和语音输出的 API。它包含SpeechRecognition 和 SpeechSynthesis。

SpeechSynthesis 是语音合成的部分，可以将文字转换为语音输出。通过创建 SpeechSynthesisUtterance 对象，设置相关属性，如语言、音量、语速等，然后使用 speak() 方法将其添加到语音队列中。可以通过监听相关事件，如 start、end、pause、resume、error 等，来处理语音合成的状态和结果。
SpeechRecognition 是语音识别的部分，可以将语音转换为文字。通过创建 SpeechRecognition 对象，设置相关属性，如语法、持续识别、期望语言等，然后使用 start() 方法开始语音识别监听。通过监听相关事件，如 start、end、result 等，来获取语音识别的结果和状态。可以通过 stop() 方法停止语音识别的监听。

参考