react项目实现语音识别功能

需要调用后端接口将录音文件传给后端，由后端将录音内容转换成文字返回给前端，当然也有一些插件可以实现语音转文字功能，可以自行查找使用插件实现方法

有注释版本，下面还有一个无注释版本。

import React, { useState, useEffect, useRef } from "react";
import { getTextByAudio } from "./api/audio";const AudioRecorder = () => {const [recording, setRecording] = useState(false); // 是否正在录音const audioData = useRef<MediaStream | null>(null); // 创建一个ref，存储媒体流数据const mediaRecorderRef = useRef<MediaRecorder | null>(null); // 创建一个ref，用于存储媒体记录器实例const chunksRef = useRef<Blob[]>([]); // 创建一个ref，用于存储音频数据块useEffect(() => {const init = async () => {try {// 获取用户媒体设备（麦克风）的媒体流const stream = await navigator.mediaDevices.getUserMedia({audio: true,});// 将获取到的媒体流存储到audioData ref中audioData.current = stream;} catch (error) {console.error("Error accessing microphone:", error);// 如果获取媒体流失败，打印错误信息// 这里可以设置一个错误状态，用于显示给用户}};init();// 组件卸载时清理资源return () => {if (audioData.current) {audioData.current.getTracks().forEach((track) => track.stop());}};}, []);const startRecording = () => {if (audioData.current) {chunksRef.current = [];// 重置chunks数组，用于新的录音mediaRecorderRef.current = new MediaRecorder(audioData.current);// 创建一个新的MediaRecorder实例// 当有数据可用时触发的事件mediaRecorderRef.current.ondataavailable = (event) => {if (event.data && event.data.size > 0) {chunksRef.current.push(event.data);// 将数据块添加到chunks数组中}};mediaRecorderRef.current.start();// 开始录音setRecording(true);// 更新录音状态为正在录音}};const stopRecording = () => {if (mediaRecorderRef.current &&mediaRecorderRef.current.state === "recording") {mediaRecorderRef.current.stop();// 停止录音setRecording(false);// 更新录音状态为未录音// 当录音停止时触发的事件mediaRecorderRef.current.onstop = async () => {// 将chunks数组中的数据合并成一个Blob对象const blob = new Blob(chunksRef.current, { type: "audio/wav" });const formData = new FormData(); // 创建一个FormData对象，用于上传音频文件formData.append("file", blob, "recording.wav");getTextByAudio(formData).then((res: any) => {console.log(res, 999);}).catch((error) => {console.error("Error converting audio to text:", error);// 这里可以设置一个错误状态，用于显示给用户});};}};return (<div><buttononClick={recording ? stopRecording : startRecording}style={{ backgroundColor: recording ? "red" : "white" }}>{recording ? "停止录音" : "开始录音"}</button></div>);
};export default AudioRecorder;

无注释版

import React, { useState, useEffect, useRef } from "react";
import { getTextByAudio } from "./api/audio";const AudioRecorder = () => {const [recording, setRecording] = useState(false);const audioData = useRef<MediaStream | null>(null);const mediaRecorderRef = useRef<MediaRecorder | null>(null);const chunksRef = useRef<Blob[]>([]);useEffect(() => {const init = async () => {try {const stream = await navigator.mediaDevices.getUserMedia({audio: true,});audioData.current = stream;} catch (error) {console.error("Error accessing microphone:", error);}};init();}, []);const handleMouseDown = () => {if (audioData.current) {chunksRef.current = []; // Reset chunks array for new recordingmediaRecorderRef.current = new MediaRecorder(audioData.current);mediaRecorderRef.current.ondataavailable = (event) => {if (event.data && event.data.size > 0) {chunksRef.current.push(event.data);}};mediaRecorderRef.current.start();setRecording(true);}};const handleMouseUp = () => {if (mediaRecorderRef.current &&mediaRecorderRef.current.state === "recording") {mediaRecorderRef.current.stop();setRecording(false);mediaRecorderRef.current.onstop = async () => {const blob = new Blob(chunksRef.current, { type: "audio/wav" });const formData = new FormData();formData.append("file", blob, "recording.wav");getTextByAudio(formData).then((res: any) => {console.log(res.Segments, 6666);});// 以下代码为下载录音// const url = URL.createObjectURL(blob);// console.log(url, 'y');// const a = document.createElement("a");// a.style.display = "none";// a.href = url;// a.download = "recording.wav";// document.body.appendChild(a);// a.click();// document.body.removeChild(a);// URL.revokeObjectURL(url);};}};return (<div><buttononMouseDown={handleMouseDown}onMouseUp={handleMouseUp}onMouseLeave={handleMouseUp}style={{ backgroundColor: recording ? "red" : "white" }}>{recording ? "正在录音..." : "开始录音"}</button></div>);
};export default AudioRecorder;