@lobehub/tts/es/react/useSpeechRecognition/useSpeechRecognitionCore.mjs

A high-quality & reliable TTS React Hooks library

import { SpeechRecognition } from "../../core/const/polyfill.mjs";
import { useCallback, useEffect, useState } from "react";

//#region src/react/useSpeechRecognition/useSpeechRecognitionCore.ts
const useSpeechRecognitionCore = (locale, { onTextChange, onRecognitionStart, onRecognitionFinish, onRecognitionStop, onRecognitionError } = {}) => {
	const [recognition, setRecognition] = useState(null);
	const [text, setText] = useState("");
	const [isLoading, setIsLoading] = useState(false);
	const [isFinalStop, setFinalStop] = useState(false);
	useEffect(() => {
		if (recognition) return;
		try {
			const speechRecognition = new SpeechRecognition();
			speechRecognition.interimResults = true;
			speechRecognition.continuous = true;
			speechRecognition.onstart = () => {
				setFinalStop(false);
				setIsLoading(true);
			};
			speechRecognition.onend = () => {
				setIsLoading(false);
				setFinalStop(true);
			};
			speechRecognition.onresult = ({ results }) => {
				if (!results) return;
				const result = results[0];
				if (!isFinalStop && result?.[0]?.transcript) {
					const value = result[0].transcript;
					setText(value);
					onTextChange?.(value);
				}
				if (result.isFinal) speechRecognition.abort();
			};
			setRecognition(speechRecognition);
		} catch (error) {
			console.error("Error useSpeechRecognitionCore:", error);
			onRecognitionError?.(error);
		}
	}, [isFinalStop]);
	useEffect(() => {
		if (!isLoading && text) onRecognitionFinish?.(text);
	}, [text, isLoading]);
	useEffect(() => {
		if (recognition) recognition.lang = locale;
	}, [recognition, locale]);
	return {
		isLoading,
		start: useCallback(() => {
			setText("");
			onTextChange?.("");
			try {
				recognition.start();
				onRecognitionStart?.();
			} catch (error) {
				console.error("Error useSpeechRecognitionCore:", "start", error);
				onRecognitionError?.(error);
			}
		}, [recognition]),
		stop: useCallback(() => {
			try {
				recognition.abort();
				onRecognitionStop?.();
			} catch (error) {
				console.error("Error useSpeechRecognitionCore:", "stop", error);
				onRecognitionError?.(error);
			}
			setIsLoading(false);
		}, [recognition]),
		text
	};
};

//#endregion
export { useSpeechRecognitionCore };