기타 [ChatGPT] 웹 브라우저에서 STT를 구현하는 방법

황제낙엽 2025.02.09 21:07 조회 수 : 176

sitelink1  
sitelink2  
extra_vars3  
extra_vars4  
extra_vars5  
extra_vars6  

웹 브라우저(HTML5) 기반의 UI에서 STT(Speech-to-Text) 기능을 구현하려면 Web Speech API를 활용하는 것이 가장 쉽고 효율적입니다.

Web Speech API는 브라우저에서 직접 음성을 인식하고 텍스트로 변환할 수 있으며, 이를 OpenAI Assistants API에 전달하여 챗봇과 상호작용할 수 있습니다.

✅ 웹 브라우저에서 STT를 구현하는 방법

1️⃣ Web Speech API (STT)로 음성 인식

웹 브라우저에서 사용자의 음성을 받아 텍스트로 변환하는 기능.

2️⃣ OpenAI Assistants API로 변환된 텍스트 전송

변환된 텍스트를 Assistants API에 전달하여 답변을 받음.

3️⃣ TTS(Text-to-Speech) API로 음성 출력(Optional)

챗봇의 응답을 다시 음성으로 변환하여 사용자에게 들려줌.

1. Web Speech API를 이용한 HTML5 + JavaScript 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>음성 인식 챗봇</title>
</head>
<body>
    <h1>음성 인식 챗봇</h1>
    <button id="start-recording">???? 음성 입력</button>
    <p id="recognized-text">음성 인식 결과: <span></span></p>
    <p id="chatbot-response">챗봇 응답: <span></span></p>

    <script>
        const startRecordingButton = document.getElementById("start-recording");
        const recognizedTextElement = document.querySelector("#recognized-text span");
        const chatbotResponseElement = document.querySelector("#chatbot-response span");

        // Web Speech API: SpeechRecognition 설정
        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
        recognition.lang = "ko-KR";  // 한국어 인식
        recognition.interimResults = false; // 중간 결과 비활성화
        recognition.continuous = false; // 한 번의 음성 인식 후 종료

        startRecordingButton.addEventListener("click", () => {
            recognition.start();
            startRecordingButton.disabled = true;
            startRecordingButton.textContent = "????️ 음성 인식 중...";
        });

        recognition.onresult = async (event) => {
            const transcript = event.results[0][0].transcript;
            recognizedTextElement.textContent = transcript;
            startRecordingButton.disabled = false;
            startRecordingButton.textContent = "???? 음성 입력";
            
            // OpenAI Assistant API에 텍스트 전달 후 응답 받기
            const response = await sendTextToAssistant(transcript);
            chatbotResponseElement.textContent = response;
            
            // TTS로 응답 음성 출력 (선택 사항)
            speakResponse(response);
        };

        recognition.onerror = (event) => {
            console.error("음성 인식 오류:", event.error);
            startRecordingButton.disabled = false;
            startRecordingButton.textContent = "???? 음성 입력";
        };

        // OpenAI API에 질문을 보내고 응답 받기
        async function sendTextToAssistant(text) {
            const OPENAI_API_KEY = "your-openai-api-key";
            const THREAD_ID = "your-thread-id";  // 생성된 thread ID를 사용
            const API_URL = `https://api.openai.com/v1/threads/${THREAD_ID}/messages`;

            const response = await fetch(API_URL, {
                method: "POST",
                headers: {
                    "Authorization": `Bearer ${OPENAI_API_KEY}`,
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    role: "user",
                    content: text
                })
            });

            const data = await response.json();
            return data.choices[0].message.content;
        }

        // TTS(Text-to-Speech)로 챗봇 응답을 음성으로 출력
        function speakResponse(text) {
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = "ko-KR";  // 한국어 음성 설정
            speechSynthesis.speak(utterance);
        }
    </script>
</body>
</html>

 동작 방식

  1. ???? 버튼 클릭 시 음성 입력 시작
  2. Web Speech API가 음성을 인식하여 텍스트로 변환
  3. 변환된 텍스트를 OpenAI Assistants API에 전달
  4. GPT가 생성한 응답을 화면에 출력
  5. TTS를 사용하여 챗봇 응답을 음성으로 변환하여 출력(선택 사항)

✅ 기능 요약

기능 사용 기술
STT (음성을 텍스트로 변환) Web Speech API
OpenAI에 텍스트 전달 Assistants API (/v1/threads/{thread_id}/messages)
TTS (텍스트를 음성으로 변환) Web Speech API (SpeechSynthesis)

 필요한 설정

  • your-openai-api-key: OpenAI API 키를 입력해야 합니다.
  • your-thread-id: 생성된 Assistant의 thread ID를 입력해야 합니다.

 이 방식의 장점

✅ 브라우저 내에서 음성 인식 (STT) & 음성 출력 (TTS) 가능
✅ 별도의 STT API 비용이 발생하지 않음
✅ 모든 주요 브라우저(Chrome, Edge, Safari)에서 지원됨
✅ HTML5 + JavaScript만으로 구현 가능 (추가 플러그인 불필요)

 결론

 

웹 브라우저에서 STT(음성 인식) → OpenAI Assistant API 호출 → TTS(음성 출력) 하는 완전한 음성 챗봇을 Web Speech API와 OpenAI API를 활용하여 구현할 수 있습니다. ????

이 게시물을
목록
쓰기 태그