App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// App.js import React from "react"; import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition"; const App = () => { // Using the hook provided by react-speech-recognition const { transcript, listening, resetTranscript, browserSupportsSpeechRecognition, } = useSpeechRecognition(); // Check if the browser supports speech recognition if (!browserSupportsSpeechRecognition) { return <p>Your browser does not support speech recognition.</p>; } return ( <div style={{ fontFamily: "Arial", textAlign: "center", marginTop: "50px" }}> <h1>React Speech Recognition Example</h1> <div> <p>Status: {listening ? "Listening..." : "Not listening"}</p> <button onClick={SpeechRecognition.startListening}>Start Listening</button> <button onClick={SpeechRecognition.stopListening}>Stop Listening</button> <button onClick={resetTranscript}>Reset Transcript</button> </div> <div style={{ marginTop: "20px" }}> <h2>Transcript:</h2> <p style={{ border: "1px solid #ccc", padding: "10px", borderRadius: "5px" }}> {transcript || "Say something!"} </p> </div> </div> ); }; export default App; |
