| 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>
동작 방식
- ???? 버튼 클릭 시 음성 입력 시작
- Web Speech API가 음성을 인식하여 텍스트로 변환
- 변환된 텍스트를 OpenAI Assistants API에 전달
- GPT가 생성한 응답을 화면에 출력
- 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를 활용하여 구현할 수 있습니다. ????
