使用 React-Speech-Recognition 实现音频转文字并统计音频时长

在这篇文章中，我们将探讨如何使用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 (
    <div>
      {isRecognizing && <h2>正在识别...</h2>}
      <h2>{result}</h2>
      {!isRecognizing && <h2>点击开始说话</h2>}
      <button onClick={() => SpeechRecognition.start()}>开始说话</button>
      {duration && <p>音频时长：{duration} 秒</p>}
    </div>
  );
}

export default SpeechToText;

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

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

参考链接 React-Speech-Recognition