사용자 음성을 텍스트로 변경하는 커스텀 훅

이번에 사용할 훅은 사용자가 마이크로 말한 음성을 텍스트로 변경하는 커스텀 훅입니다.

1. 브라우저의 SpeechRecognition API를 사용하여 음성 인식 기능을 지원합니다.
2. 음성 인식할 때 해당 언어를 한국어로 설정합니다 (ko-KR).
3. 음성 인식이 끝났을 때 결과를 반환하고, 인식으로부터 에러가 발생할 경우 에러 메시지를 반환합니다.
4. 음성 인식을 시작하고 종료하는 메서드를 제공합니다.

코드의 간략한 설명:

• useState를 사용하여 결과(result)와 음성 인식 객체(recognition) 상태를 관리합니다.
• useEffect를 사용하여 컴포넌트가 마운트될 때 SpeechRecognition을 초기화합니다.
• initRecognition 함수는 SpeechRecognition 객체를 초기화하고 구성합니다.
• startListening 메서드는 음성 인식을 시작하고 result 및 error 이벤트 리스너를 추가합니다.
• stopListening 메서드는 이벤트 리스너를 제거하고 음성 인식을 종료합니다.
• handleResult 및 handleError 메서드는 각각 결과 이벤트와 에러 이벤트를 처리하여 상태를 업데이트합니다.
• 이 훅을 사용하여 음성 어시스턴트와 같은 애플리케이션에서 사용자의 음성 입력을 인식하고 처리할 수 있습니다.

import { useState, useEffect } from "react";

const useSpeechRecognition = () => {
    const [result, setResult] = useState<any>({
        text: "",
        error: null,
    });
    const [recognition, setRecognition] = useState<any>(null);

    useEffect(() => {
        const initRecognition = () => {
            //@ts-ignore
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

            if (!SpeechRecognition) {
                console.error("SpeechRecognition이 지원되지 않습니다.");
                return null;
            }

            const newRecognition = new SpeechRecognition();
            newRecognition.lang = "ko-KR";
            newRecognition.interimResults = false;
            newRecognition.maxAlternatives = 1;

            return newRecognition;
        };

        const speechRecognition = initRecognition();
        setRecognition(speechRecognition);
    }, []);

    const startListening = () => {
        if (!recognition) {
            setResult({ text: "", error: "SpeechRecognition이 지원되지 않습니다." });
            return;
        }

        recognition.addEventListener("result", handleResult);
        recognition.addEventListener("error", handleError);
        recognition.start();
    };

    const stopListening = () => {
        if (recognition) {
            recognition.removeEventListener("result", handleResult);
            recognition.removeEventListener("error", handleError);
            recognition.stop();
        }
    };

    const handleResult = (event: any) => {
        const text = event.results[0][0].transcript;
        setResult({ text, error: null });
    };

    const handleError = (event: any) => {
        setResult({
            text: "",
            error: `SpeechRecognition error: ${event.error}`,
        });
        stopListening();
    };

    return [result, startListening, stopListening];
};

export default useSpeechRecognition;