useASR

useASR is a custom React hook for Automatic Speech Recognition (ASR) that provides functionality to record audio using the Web Audio API.

Use Cases

• detect human voice and sent it for speech-to-text processing.
• AI Prompt Engineering where user could have a better UX to input text using human voice.

Installation

npm install react-asr

or

yarn add react-asr

Usage

import React from 'react';
import useASR, { ConfigType } from 'react-asr';

const config: ConfigType = {
  MIN_DECIBELS: -80,
  DETECTION_INTERVAL: 100,
  SILENCE_DURATION: 2000,
  LOG_ENABLED: false,
};

export default function MicWithAlertBox() {
  const { isRecording, recordedBlob, startRecording, stopRecording } = useASR<ConfigType>(config);

  const { postASRMutation } = useContext(SearchContext);

  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const onStartRecording = () => {
    handleClickOpen();
    startRecording();
  };

  useEffect(() => {
    if (!isRecording) {
      handleClose();
    }
  }, [isRecording]);

  useEffect(() => {
    if (!open) {
      stopRecording();
    }
  }, [open]);

  useEffect(() => {
    if (recordedBlob) {
      const formData = new FormData();
      formData.append('file', recordedBlob, 'audio.wav');
      postASRMutation?.mutate(formData);
    }
  }, [recordedBlob]);

  return (
    <>
      <ImageIcon
        src="/mic.svg"
        className="ltr:mr-10 rtl:ml-10 cursor-pointer"
        onClick={onStartRecording}
      />
      <AlertDialogSlide open={open} onClose={handleClose} />
    </>
  );
}


export default MicWithAlertBox;

Configuration Options

| Option | Description | Default Value | | -------------------- | -------------------------------------------------------------------------------- | ------------- | | MIN_DECIBELS | The minimum decibel level to consider as audio input. | -80 | | DETECTION_INTERVAL | The interval (in milliseconds) at which audio is analyzed for silence detection. | 100 | | SILENCE_DURATION | The duration (in milliseconds) of silence required to end the recording. | 2000 | | LOG_ENABLED | Controls whether to log debug information to the console. | false |

Return Values

| Property | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- | | isRecording | Indicates whether audio recording is currently in progress. | | recordedBlob | The recorded audio data in Blob format. It will be null if no recording has been made or if the recording has not yet finished. | | startRecording | Starts the audio recording process. | | stopRecording | Stops the audio recording process. |

License This project is licensed under the MIT License.