-
STT(Speech To Text) 기능 구현개발/자바스크립트 2024. 6. 24. 01:16
해당 기능은 크롬 이외의 브라우저에서 잘 실행이 안될 수도 있다.
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>STT Example</title></head><body><button id="start">Start Speech Recognition</button><div id="result"></div>
<script src="script.js"></script></body></html>script.js
document.getElementById('start').addEventListener('click', () => {// SpeechRecognition 객체 생성const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;const recognition = new SpeechRecognition();
// 언어 설정 (한국어로 설정)recognition.lang = 'ko-KR';
// 결과가 있을 때마다 호출되는 이벤트 핸들러recognition.onresult = (event) => {const transcript = event.results[0][0].transcript;document.getElementById('result').innerText = transcript;};
// 인식 시작recognition.start();});recognition.onresult는 비동기적으로 실행된다.
여기서 even.results[0][0].transcript 부분을 좀 더 자세히 살펴보자면..
results 배열에 예를 들어 다음과 같은 정보들이 저장돼있다고 해보자.
{
"results": [
[
{
"transcript": "안녕하세요,",
"confidence": 0.95
}
],
[
{
"transcript": "저는 메스가키 AI입니다",
"confidence": 0.98
}
]
]
}results: 음성 인식 결과의 전체 목록.
results[0]: 첫 번째 문장의 인식 결과.
results[0][0]: 첫 번째 문장의 첫 번째 대안 (가장 신뢰도가 높은 결과).
results[0][0].transcript: 첫 번째 문장의 첫 번째 대안의 텍스트 내용.
이런 느낌이다.
가장 신뢰도가 높은 결과가 무슨 말이냐면
AI는 안녕하세요라고 말한 것을 듣고 이것을 다양하게 해석할 것이다.
안녕하세요, 안냥하세요, 안뇽하세요, 안니융하세요
막 이런식으로 말이다 ㅋㅋ
그렇기 때문에 이 중에 신뢰도가 가장 높은 안녕하세요를 뽑기 위해서 제일 처음인덱스인 [0][0]을 선택하는거다
'개발 > 자바스크립트' 카테고리의 다른 글
splice 메서드 (1) 2024.09.30 forEach (1) 2024.09.30 FormData 객체 (1) 2024.09.30 ===란? (1) 2024.09.30