React/Next.js中同时使用react-speech-recognition与react-media-recorder在Android失效求助

我需要在React/Next.js应用中同时实现语音识别转文本和录音功能，分别采用react-speech-recognition和react-media-recorder两个库。

单独使用任意一个库时，Android Chrome都能正常工作。但同时启用两者时，PC端Chrome运行正常，Android端却只有录音功能正常，语音识别完全无法执行、无法输出文本，应用运行异常。

我怀疑是两者同时占用麦克风导致冲突，尝试过以下方案但未解决：

• 不通过语音识别的启停状态触发录音，改用独立按钮同时启动语音识别和录音，但Android端依旧无法同时运行两者（PC端正常）。

相关代码 #

WebSpeechAPI组件（语音识别）

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;

ReactMediaRecorder组件（录音）

import { useReactMediaRecorder } from 'react-media-recorder';
import { useState, useEffect } from 'react';

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>

    </>
  );
}

内容的提问来源于stack exchange，提问作者mimibel