React-speech-recognition 在 React(Next.js) 中与 React-media-recorder 一起使用不适用于 Android 手机

Question

我想在我的 React/Next.js 应用程序实现中使用“react-speech-recognition”和“react-media-recorder”来同时执行语音识别和录音。 语音识别正在输出文本。

仅实现反应语音识别， 仅react-media-recorder的实现在Android chrome上都运行良好。

由于我希望能够在语音识别的同时进行录音，因此我们通过触发语音识别的开/关切换来控制录音。

在 PC 上的 chrome 上可以正常工作，但在 Android 设备上，录音可以正常工作，但语音识别未按预期执行，并且未输出文本，应用程序无法正常工作。

由于麦克风应该同时用于语音识别和录音，所以这会是问题吗？

我已经研究过这个问题，但无法解决问题，所以我将其发布在这里。

import React, { useEffect, useState } from 'react';
import SpeechRecognition, {
  useSpeechRecognition,
} from 'react-speech-recognition';


const WebSpeechAPI = ({ checkAnswer }) => {
  const {
    transcript,
    finalTranscript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition,
    isMicrophoneAvailable,
  } = useSpeechRecognition();

  const [isListening, setIsListing] = useState(false);

  const isServer = typeof window === 'undefined';
  if (!browserSupportsSpeechRecognition && !isServer) {
    return <div>your browser does not support</div>;
  }

  const handleSwitch = () => {
    if (!isListening) {
      SpeechRecognition.startListening({ language: 'ja' });
    } else {
      SpeechRecognition.stopListening();
    }
    setIsListing(!isListening);
  };

  return (
    <div>
      <p style={{ fontSize: '2rem' }}>マイク: {listening ? 'on' : 'off'}</p>
      <button
        onClick={() => SpeechRecognition.startListening({ language: 'ja' })}
        className="micb"
        style={{ padding: '1em', marginRight: '10px' }}
      >
        Start
      </button>
      <button
        onClick={SpeechRecognition.stopListening}
        className="micb"
        style={{ padding: '1em', marginRight: '10px' }}
      >
        Stop
      </button>
      <button onClick={resetTranscript}>Reset</button>
      <form>
        <p>{isMicrophoneAvailable}</p>
        <p>{transcript}</p>
        <p>{finalTranscript}</p>
      </form>
      <ReactMediaRecorder listening={listening} />
    </div>
  );
};
export default WebSpeechAPI;

import { useReactMediaRecorder } from 'react-media-recorder';

export function ReactMediaRecorder({ listening }) {
  const [voice, setVoice] = useState('');

  // Voice acquisition part
  const { startRecording, stopRecording, mediaBlobUrl, audio, status } =
    useReactMediaRecorder({
      video: false,
      audio: true,
      echoCancellation: true,
    });


  useEffect(() => {
    listening ? startRecording() : stopRecording();
  }, [listening]);

  return (
    <>
      <h4>react-media-recorder</h4>
      <div>
        <div></div>
        <div style={{ height: '38px' }}>
          <audio src={mediaBlobUrl} controls></audio>
          <a download href={mediaBlobUrl}>
            Download
          </a>
        </div>
      </div>

    </>
  );
}

我已经尝试过以下...

请勿使用语音识别作为录音的触发， 我也尝试过用不同的按钮同时执行语音识别和录音，但是在Android上两者没有同时执行（它们是在PC浏览器上执行的）。

Answer 1

音频转文本不是免费服务，但在 Chrome 中，Google 免费提供。在其他浏览器中，您需要使用 pollyfill

订阅 Google 或其他提供商提供的服务