前言
最近我接触到了一款通过实时对话学习英语的APP，它可以让我们跟微信好友聊天一样互发语音来学习英语。
如果让我做的话，我可能会这么做：首先把我们的语音转换为文本，然后输入给大语言模型，大语言模型回答完之后，再把文本转换成音频。
那这里就涉及到文字转语音以及语音转文字，我们今天就来试一下，这两件事情是否可以通过纯前端的方式来实现。
语音转文字
ASR，即自动语音识别（Automatic Speech Recognition），是一种将人类语音转换为文本的技术。它广泛应用于各种场景，如语音助手（如Siri或Google Assistant）、转录服务和语音控制设备等。
首先来看这个 API ——Speech Recognition，这个是浏览器提供的语音识别 API 。
它允许 web 应用程序捕获和处理用户的语音输入，将其转换为可用的文本数据，主要包括以下的内容：
-
主要接口和方法：
- SpeechRecognition：主接口，用于创建语音识别对象。
- start() ：开始语音识别。
- stop() ：停止语音识别。
- abort() ：立即中止语音识别。
- SpeechRecognitionEvent：当语音识别引擎返回结果时触发的事件。
-
事件：
- onaudiostart：当音频捕获开始时触发。
- onaudioend：当音频捕获结束时触发。
- onresult：当语音识别结果生成时触发，包含识别的文本数据。
- onnomatch：当识别结果不匹配任何已知的词语时触发。
- onerror：当识别过程中出现错误时触发。
兼容性看起来一般，像 Firefox、 IE 就全方位不支持了，所以生产上更多用的都是后端处理的方案，具体来说可能会去买一些 ASR 的服务，比如百度、讯飞等公司的。
回到本文主题，我们还是先尝试使用这个 API 去做语音转文字。我这里用的是react-speech-recognition这个库，它封装了 Speech Recognition ，提供了更简洁的接口，让我们可以更方便的使用。
整体使用代码如下：
import React from "react";
import "regenerator-runtime/runtime";
import SpeechRecognition, {
useSpeechRecognition,
} from "react-speech-recognition";
const Dictaphone = () => {
const {
listening,
resetTranscript,
browserSupportsSpeechRecognition,
finalTranscript,
} = useSpeechRecognition();
if (!browserSupportsSpeechRecognition) {
return <span>Browser doesn't support speech recognition.</span>;
}
return (
<div>
<p>麦克风: {listening ? "开启" : "关闭"}</p>
<button
onClick={() =>
SpeechRecognition.startListening({
continuous: true,
language: "zh-CN",
})
}
>
开始
</button>
<button onClick={SpeechRecognition.stopListening}>停止</button>
<button onClick={resetTranscript}>重置</button>
<p>{finalTranscript}</p>
</div>
);
};
export default Dictaphone;
整体看来识别效果是挺好的，我普通话那么不标准都能识别出来，不过识别的速度有点慢
文字转语音
文字转语音用的是这个 API —SpeechSynthesis
它主要包括以下内容：
window.speechSynthesis.getVoices()：获取当前所有可用的声音speak：播放声音rate：语速，默认值为 1，可以设置为 0.1 到 10。pitch：音调，默认值为 1，可以设置为 0 到 2。volume：音量，默认值为 1，可以设置为 0 到 1。
通过调用 getVoices 发现，有一百多种声音
那我们随便选一种来播放看看：
const play = () => {
const voices = window.speechSynthesis.getVoices();
const utterance = new SpeechSynthesisUtterance(value);
utterance.voice = voices.find((voice) => voice.name === "婷婷");
utterance.rate = 1.2; // 语速稍快
utterance.pitch = 1; // 默认音调
utterance.volume = 0.8; // 音量稍低
window.speechSynthesis.speak(utterance);
};
这里我就放不了语音了，亲测没问题，而且有点魔性，感兴趣的可以自己去试试。
最后
以上就是本文的全部内容，如果你觉得有意思的话，点点关注点点赞吧～
