使用 React

2024-06-24 05:14| 来源: 网络整理| 查看: 265

在这篇文章中，我们将探讨如何使用React-Speech-Recognition库来实现音频转文字的功能，并统计音频的时长。

React-Speech-Recognition是一个基于Web Speech API的React组件，它可以让我们在React应用中轻松地实现语音识别功能。

首先确保你已经安装了react-speech-recognition库，如果没有，可以使用以下命令进行安装：

npm install react-speech-recognition

接下来，我们将创建一个简单的React组件，该组件将使用React-Speech-Recognition来实现音频转文字的功能，并统计音频的时长。

import React, { useState, useEffect } from 'react'; import SpeechRecognition from 'react-speech-recognition'; function SpeechToText() { const [result, setResult] = useState(''); const [isRecognizing, setIsRecognizing] = useState(false); const [duration, setDuration] = useState(0); useEffect(() => { SpeechRecognition.start({ continuous: true, lang: 'zh-CN', }); SpeechRecognition.onResult((event) => { setResult(event.results[0][0].transcript); }); SpeechRecognition.onEnd(() => { setIsRecognizing(false); setDuration(new Date() - startTime); }); return () => { SpeechRecognition.stop(); }; }, []); const startTime = new Date(); return ( {isRecognizing && 正在识别...} {result} {!isRecognizing && 点击开始说话} SpeechRecognition.start()}>开始说话 {duration && 音频时长：{duration} 秒} ); } export default SpeechToText;

在这个示例中，我们使用useEffect钩子来启动语音识别，并在识别结束后计算音频的时长。当用户点击“开始说话”按钮时，语音识别将开始，并在界面上显示“正在识别…”的提示。当用户停止说话时，语音识别将停止，并显示识别结果和音频时长。

请注意，这个示例仅适用于在浏览器中运行，并且需要浏览器支持Web Speech API。此外，它可能无法在某些浏览器或设备上正常工作，具体取决于浏览器和设备的支持情况。

参考链接 React-Speech-Recognition

【本文地址】

使用 React

使用 React

今日新闻

推荐新闻