如何让成绩单出现在屏幕上

Question

我希望我的网站从对着麦克风讲话的用户那里获取音频输入，然后将他们所说的内容输出到屏幕上。我已经在我的 react 网站中实现了语音识别，但是当我对着麦克风说话时，我看不到文字记录。

这是我的语音识别相关代码

这是在我的主 App.js 文件中的一个名为 App 的类中，这是正在呈现的内容的一部分：

<p>Microphone: {Dictaphone.listening ? 'on' : 'off'}</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={Dictaphone.resetTranscript}>Reset</button>
<p>{Dictaphone.transcript}</p>

这是在一个名为 Dictaphone.jsx 的单独文件中，我不得不制作一个单独的文件，因为我无法在 App 类中使用挂钩：

import { useSpeechRecognition } from 'react-speech-recognition';

const Dictaphone = () => {
    const {
      transcript,
      listening,
      resetTranscript,
      browserSupportsSpeechRecognition
    } = useSpeechRecognition();

    return null;
};

export default Dictaphone

有谁知道为什么屏幕上没有显示麦克风中所说的文字记录吗？ 另外，当我点击网站上的“开始”按钮时，我的麦克风打开（我的电脑上会弹出一个麦克风图标），但从这段代码中，“关闭”不会变为“开启”：@ 987654323@。有谁知道为什么没有？

Answer 1

有两个问题：

1.) Dictaphone 实际上不是 React 组件（简而言之，如果您在 App 的渲染或 App 的子级中调用函数，则该函数成为 React 组件）Es：

const App = () => {
     return <>
           <Dictaphone />
     </> 
} // <- NOW, React understand that Dictaphone is a component

2.) 即使它是一个组件，你也不能从另一个访问私有属性。

那么，你可以试试这段代码：

const YourParent = () => {

    const dictaphone = {...useSpeechRecognition()};

    return <>
         <p>Microphone: {dictaphone.listening ? 'on' : 'off'}</p>
         <button onClick={SpeechRecognition.startListening}>Start</button>
         <button onClick={SpeechRecognition.stopListening}>Stop</button>
         <button onClick={Dictaphone.resetTranscript}>Reset</button>
         <p>{dictaphone.transcript}</p>
    </>
}

编辑： 好的，如果您需要使用两个不同的文件，我认为唯一的方法是使用context。

在录音机文件中：

import { useSpeechRecognition } from 'react-speech-recognition';

const DictaphoneContext = React.createContext();

export const Dictaphone = ({children}) => {
    const dictaphone = {...useSpeechRecognition()};
    
    return <DictaphoneContext.Provider value={dictaphone}>
      {children}
    </DictaphoneContext.Provider>
};

export const DictaphoneListening = ({}) => {
    const dictaphone = React.useContext(DictaphoneContext);  
    return <><dictaphone.listening ? 'on' : 'off'}</>
};

export const DictaphoneTranscript = ({}) => {
    const dictaphone = React.useContext(DictaphoneContext);  
    return <>{dictaphone.transcript}</>
};

在主文件中：

return <>
     <Dictaphone>
         <p>Microphone: <DictaphoneListening /></p>
         <button onClick={SpeechRecognition.startListening}>Start</button>
         <button onClick={SpeechRecognition.stopListening}>Stop</button>
         <button onClick={Dictaphone.resetTranscript}>Reset</button>
         <p><DictaphoneTranscript /></p>
     </Dictaphone>
</>