React Js Audio Recorder

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useRef, useEffect } = React;
    function App() {
      const [outputText, setOutputText] = useState('Welcome to Audio Recorder');
      const [isRecording, setIsRecording] = useState(false);
      const [timer, setTimer] = useState(0); // Add timer state
      const audioChunksRef = useRef([]);
      const audioRecorderRef = useRef(null);

const startRecording = async () => {
        audioChunksRef.current = [];
        setTimer(0); // Reset the timer
        try {
          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
          audioRecorderRef.current = new MediaRecorder(stream);

audioRecorderRef.current.addEventListener('dataavailable', (e) => {
            audioChunksRef.current.push(e.data);
          });

audioRecorderRef.current.start();
          setOutputText('We are recording now! Please start talking.');
          setIsRecording(true);

// Start the timer
          const timerInterval = setInterval(() => {
            setTimer((prevTimer) => prevTimer + 1);
          }, 1000);
          audioRecorderRef.current.addEventListener('stop', () => {
            setIsRecording(false);
            clearInterval(timerInterval); // Stop the timer when recording ends
          });
        } catch (err) {
          console.error('Error: ' + err);
        }
      };

const stopRecording = () => {
        audioRecorderRef.current.stop();
        setOutputText('The recording has ended! Just click the play button to listen.');
      };

const playAudio = () => {
        const blobObj = new Blob(audioChunksRef.current, { type: 'audio/webm' });
        const audioUrl = URL.createObjectURL(blobObj);
        const audio = new Audio(audioUrl);
        audio.play();
        setOutputText('Playing the recorded audio!');
      };

useEffect(() => {
        if (audioRecorderRef.current) {
          audioRecorderRef.current.addEventListener('stop', () => {
            setIsRecording(false);
          });
        }
      }, []);

return (
        <div className='container'>
          <h3 className='heading'>React Js Audio Recorder App</h3>
          <div className='button-container'>
            <button className='record-button' onClick={isRecording ? stopRecording : startRecording}>
              {isRecording ? 'Stop Recording' : 'Start Recording'}
            </button>
            <button className='play-button' onClick={playAudio}>
             Play back recording
            </button>
          </div>
          <p className='timer-text'>Recording Time: {timer} seconds</p>
          <br />
          <div className='output' id="output">{outputText}</div>
        </div>

);
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      font-family: Arial, sans-serif;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      max-width: 600px;
      margin: 0 auto;
      text-align: center;
    }

.heading {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
    }

.button-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

.record-button,
    .play-button {
      background-color: #007bff;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

.record-button:hover,
    .play-button:hover {
      background-color: #0056b3;
    }

.timer-text {
      font-size: 16px;
      margin-top: 20px;
    }

.output {
      margin-top: 20px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      min-height: 100px;
      word-wrap: break-word;
    }
  </style>
</body>

</html>