@lobehub/tts/es/react/useAudioRecorder/index.mjs

A high-quality & reliable TTS React Hooks library

import { getRecordMineType } from "../../core/utils/getRecordMineType.mjs";
import { secondsToMinutesAndSeconds } from "../../core/utils/secondsToMinutesAndSeconds.mjs";
import { useCallback, useState } from "react";

//#region src/react/useAudioRecorder/index.ts
const useAudioRecorder = (onBlobAvailable) => {
	const [isRecording, setIsRecording] = useState(false);
	const [time, setTime] = useState(0);
	const [mediaRecorder, setMediaRecorder] = useState();
	const [timerInterval, setTimerInterval] = useState();
	const [blob, setBlob] = useState();
	const [url, setUrl] = useState();
	const _startTimer = useCallback(() => {
		setTimerInterval(setInterval(() => {
			setTime((time) => time + 1);
		}, 1e3));
	}, []);
	const _stopTimer = useCallback(() => {
		timerInterval !== void 0 && clearInterval(timerInterval);
		setTimerInterval();
	}, [timerInterval]);
	const start = useCallback(() => {
		if (url) URL.revokeObjectURL(url);
		setUrl(void 0);
		setBlob(void 0);
		if (timerInterval !== void 0) return;
		navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
			setIsRecording(true);
			const recorder = new MediaRecorder(stream, { mimeType: getRecordMineType().mineType });
			setMediaRecorder(recorder);
			recorder.start();
			_startTimer();
			recorder.addEventListener("dataavailable", (event) => {
				const blobData = event.data;
				setBlob(blobData);
				setUrl(URL.createObjectURL(blobData));
				onBlobAvailable?.(event.data);
				recorder.stream.getTracks().forEach((t) => t.stop());
				setMediaRecorder();
			});
		}).catch((error) => {
			console.error("Error useAudioRecorder", error);
		});
	}, [
		timerInterval,
		_startTimer,
		url
	]);
	const stop = useCallback(() => {
		mediaRecorder?.stop();
		_stopTimer();
		setTime(0);
		setIsRecording(false);
	}, [mediaRecorder, _stopTimer]);
	return {
		blob,
		formattedTime: secondsToMinutesAndSeconds(time),
		isRecording,
		mediaRecorder,
		start,
		stop,
		time,
		url
	};
};

//#endregion
export { useAudioRecorder };