728x90
음성 인식 결과를 사용자에게 보여주고, 그 결과를 바탕으로 추가적인 음성 응답을 하는 웹 애플리케이션을 구현하려면, 인식된 음성을 화면에 표시하고 음성 합성으로 응답을 하는 것이 중요합니다. 아래는 음성 인식 결과를 화면에 표시하는 기능을 포함한 예제입니다.
HTML과 자바스크립트 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>음성 대화 예제</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#status {
margin-top: 20px;
font-size: 1.2em;
}
#transcript {
margin-top: 20px;
font-size: 1.5em;
color: #333;
}
</style>
</head>
<body>
<h1>음성 대화 예제</h1>
<button id="start-button">음성 인식 시작</button>
<p id="status">대기 중...</p>
<p id="transcript">인식된 내용이 여기에 표시됩니다.</p>
<script>
const startButton = document.getElementById('start-button');
const statusElement = document.getElementById('status');
const transcriptElement = document.getElementById('transcript');
// 음성 인식 객체 생성
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
// 음성 합성 객체 생성
const synth = window.speechSynthesis;
// 음성 인식 설정
recognition.lang = 'ko-KR';
recognition.interimResults = false; // 중간 결과를 사용할 것인지 설정
recognition.maxAlternatives = 1; // 최대 결과 수
// 음성 인식이 시작될 때 호출
recognition.onstart = () => {
statusElement.textContent = '음성 인식 중...';
};
// 음성 인식 결과를 처리하는 함수
recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript;
transcriptElement.textContent = `인식된 내용: ${transcript}`;
// 응답을 설정
let responseText;
if (transcript.includes('안녕하세요')) {
responseText = '안녕하세요! 무엇을 도와드릴까요?';
} else if (transcript.includes('날씨')) {
responseText = '오늘 날씨는 맑습니다.';
} else {
responseText = '죄송합니다, 이해하지 못했습니다.';
}
// 음성으로 응답을 말합니다
const utterance = new SpeechSynthesisUtterance(responseText);
utterance.lang = 'ko-KR';
synth.speak(utterance);
};
// 음성 인식 중 오류가 발생하면 호출
recognition.onerror = (event) => {
statusElement.textContent = `오류 발생: ${event.error}`;
};
// 음성 인식이 종료될 때 호출
recognition.onend = () => {
statusElement.textContent = '음성 인식 종료.';
};
// 버튼 클릭 시 음성 인식 시작
startButton.addEventListener('click', () => {
recognition.start();
});
</script>
</body>
</html>코드 설명
HTML 구조:
#start-button: 음성 인식을 시작하는 버튼.#status: 음성 인식의 현재 상태를 표시하는 영역.#transcript: 인식된 음성을 표시하는 영역.
자바스크립트:
SpeechRecognition객체를 생성하여 음성 인식을 설정합니다.speechSynthesis객체를 사용하여 텍스트를 음성으로 변환합니다.- 음성 인식이 시작되면 상태를 "음성 인식 중..."으로 설정하고, 인식된 음성을
#transcript요소에 표시합니다. - 인식된 음성에 대한 응답을 설정하고,
SpeechSynthesisUtterance객체를 사용하여 음성으로 응답을 제공합니다. - 음성 인식 중 오류가 발생하거나 인식이 종료되면 상태를 업데이트합니다.
사용 시 주의 사항
- 브라우저 호환성: 이 기능은 최신 Chrome 브라우저에서 가장 잘 작동합니다. 다른 브라우저에서는 지원되지 않을 수 있습니다.
- HTTPS 필요: 대부분의 브라우저에서 Web Speech API는 HTTPS에서만 작동합니다. 로컬 개발 환경에서는
localhost에서 동작할 수 있습니다. - 권한 요청: 사용자가 브라우저에 음성 인식을 허용해야 합니다. 브라우저에서 권한 요청이 표시될 수 있습니다.
이 예제는 기본적인 음성 대화 기능을 제공하며, 실제 애플리케이션에서는 보다 복잡한 요구사항을 처리하기 위해 추가적인 기능을 구현할 수 있습니다.
728x90
반응형
'Software > JavaScript' 카테고리의 다른 글
| NodeJS 시작하기 - Google Cloud이미지를 저장 (0) | 2024.07.27 |
|---|---|
| Javascript 시작하기 - 사물 인식 (0) | 2024.07.27 |
| Javascript 시작하기 - 다국어 방안 2 (0) | 2024.07.26 |
| Vue.js 시작하기 - 다국어 지원 (0) | 2024.07.26 |
| Javascript 시작하기 - 다국어 방안 1 (0) | 2024.07.26 |