web端语音文件转文字react

要在 React 应用程序中实现语音文件转文字，你需要使用 Web Speech API。这个API是现代浏览器的一部分，可以让你使用JavaScript来处理语音识别。

以下是一个简单的React组件，它允许用户上传语音文件并将其转换为文字：

import React, { useState } from 'react';

const SpeechToText = () => {
  const [text, setText] = useState('');

  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      const audio = new Audio(reader.result);
      const recognition = new webkitSpeechRecognition();
      recognition.lang = 'en-US';
      recognition.interimResults = false;
      recognition.maxAlternatives = 1;
      recognition.onresult = (event) => {
        const result = event.results[0][0].transcript;
        setText(result);
      };
      recognition.onerror = (event) => {
        console.error(event.error);
      };
      audio.oncanplaythrough = () => {
        audio.play();
        recognition.start();
      };
    };
  };

  return (
    <div>
      <input type="file" accept="audio/*" onChange={handleFileUpload} />
      <p>{text}</p>
    </div>
  );
};

export default SpeechToText;

这个组件有一个文件上传按钮，用户可以选择上传语音文件。当用户上传文件时，组件会使用FileReader API将音频文件读取到内存中，并创建一个新的Audio对象来播放音频。然后，组件使用webkitSpeechRecognition API来识别音频中的文字。当识别完成时，组件将文本显示在页面上。

请注意，这个组件使用了webkitSpeechRecognition API，这意味着它只能在WebKit浏览器（如Chrome和Safari）中使用。如果你需要在其他浏览器中使用语音识别，你需要使用其他API，如SpeechRecognition API。