728x90
반응형
[JavaScript] 자바스크립트로 STT API(Web Speech API) 사용하기 !!
버튼 클릭하고 마이크 허용 후에 사용하시면 됩니다 !
단, localhost나 https 환경에서만 작동합니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="sendSpeech();">STT 버튼</button>
<p class="output">...diagnostic messages</p>
</body>
</html>
<script>
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
var diagnosticPara = document.querySelector('.output');
function sendSpeech() {
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
recognition.grammars = speechRecognitionList;
recognition.lang = 'ko-KR';
recognition.interimResults = false; // true: 중간 결과를 반환, false: 최종 결과만 반환
recognition.continious = false; // true: 음성인식을 계속해서 수행, false: 음성인식을 한번만 수행
recognition.maxAlternatives = 1;
recognition.start();
recognition.onresult = function(event) {
var speechResult = event.results[0][0].transcript.toLowerCase();
console.log('Confidence: ' + event.results[0][0].confidence);
console.log('Speech Result: ' + speechResult);
diagnosticPara.textContent = 'Speech received: ' + speechResult + '.';
}
recognition.onaudiostart = function(event) {
//Fired when the user agent has started to capture audio.
console.log('SpeechRecognition.onaudiostart');
}
recognition.onaudioend = function(event) {
//Fired when the user agent has finished capturing audio.
console.log('SpeechRecognition.onaudioend');
}
recognition.onend = function(event) {
//Fired when the speech recognition service has disconnected.
console.log('SpeechRecognition.onend');
}
recognition.onnomatch = function(event) {
//Fired when the speech recognition service returns a final result with no significant recognition. This may involve some degree of recognition, which doesn't meet or exceed the confidence threshold.
console.log('SpeechRecognition.onnomatch');
}
recognition.onsoundstart = function(event) {
//Fired when any sound — recognisable speech or not — has been detected.
console.log('SpeechRecognition.onsoundstart');
}
recognition.onsoundend = function(event) {
//Fired when any sound — recognisable speech or not — has stopped being detected.
console.log('SpeechRecognition.onsoundend');
}
recognition.onspeechstart = function (event) {
//Fired when sound that is recognised by the speech recognition service as speech has been detected.
console.log('SpeechRecognition.onspeechstart');
}
recognition.onstart = function(event) {
//Fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
console.log('SpeechRecognition.onstart');
}
}
</script>결과값
...diagnostic messages
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 라이브러리 없이 TTS(Text-To-Speech) 기능 사용하는 방법 !! (0) | 2023.04.15 |
|---|---|
| [JavaScript] 자바스크립트로 div 태그안에 있는 내용 삭제 하는 방법 !! (0) | 2023.04.05 |
| [JavaScript] 자바스크립트로 input 태그에 휴대전화번호 하이픈(-) 넣는 방법 !! (0) | 2023.03.17 |
| [JavaScript] 자바스크립트로 휴대전화번호 자리수 정규화 체크하는 방법 !! (0) | 2023.03.16 |
| [JavaScript & jQuery] 자바스크립트로 주민번호 뒷자리 마스킹 하는 방법 !!(별표처리) (0) | 2023.03.15 |
댓글