react-asr v0.0.5

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

Return Values

License This project is licensed under the MIT License.