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

Question

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

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

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

<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 的单独文件中，我不得不制作一个单独的文件，因为我无法在应用程序中使用挂钩 class:

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

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

    return null;
};

export default Dictaphone

有谁知道为什么屏幕上没有显示对着麦克风讲话的文字记录？此外，当我单击网站上的“开始”按钮时，我的麦克风会打开（我的电脑上会弹出一个麦克风图标），但“关闭”不会从这段代码变为“打开”：<p>Microphone: {Dictaphone.listening ? 'on' : 'off'}</p>。有谁知道为什么没有？

Answer 1

有两个问题：

1.) Dictaphone 实际上不是一个 React 组件（简单来说，如果你在 App 的 render 或 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>
</>

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

How do I make the transcript appear on screen

speech-recognition

transcription

reactjs