새로운 JavaScript Web Speech API를 사용하면 웹페이지에 음성 인식을 쉽게 추가할 수 있습니다. 이 API를 사용하면 Chrome 버전 25 이상에서 음성 인식 기능을 세부적으로 제어하고 유연하게 사용할 수 있습니다. 다음은 말하는 동안 인식된 텍스트가 거의 즉시 표시되는 예입니다.
자세히 살펴보겠습니다. 먼저 webkitSpeechRecognition 객체가 있는지 확인하여 브라우저에서 Web Speech API를 지원하는지 확인합니다. 그렇지 않은 경우 사용자에게 브라우저를 업그레이드하도록 제안합니다. 이 API는 아직 실험 단계이므로 현재 공급업체 접두사가 추가되어 있습니다. 마지막으로 음성 인터페이스를 제공하는 webkitSpeechRecognition 객체를 만들고 일부 속성과 이벤트 핸들러를 설정합니다.
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
continuous의 기본값은 false입니다. 즉, 사용자가 말을 멈추면 음성 인식이 종료됩니다. 이 모드는 짧은 입력란과 같은 간단한 텍스트에 적합합니다. 이 데모에서는 사용자가 말하는 중에 일시중지해도 인식이 계속되도록 true로 설정했습니다.
interimResults의 기본값은 false입니다. 즉, 인식기에서 반환하는 유일한 결과가 최종 결과이며 변경되지 않습니다. 데모에서는 이 옵션을 true로 설정하여 변경될 수 있는 초기 중간 결과를 가져옵니다. 데모를 주의 깊게 살펴보세요. 회색 텍스트는 임시 텍스트로 가끔 변경되지만 검은색 텍스트는 인식기의 응답으로 최종으로 표시되며 변경되지 않습니다.
시작하려면 사용자가 마이크 버튼을 클릭하면 다음 코드가 트리거됩니다.
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
음성 인식기 'lang'의 음성 언어를 사용자가 선택 드롭다운 목록을 통해 선택한 BCP-47 값(예: 영어(미국)의 경우 'en-US')으로 설정합니다. 이 속성을 설정하지 않으면 기본값은 HTML 문서 루트 요소 및 계층 구조의 lang입니다. Chrome 음성 인식은 다양한 언어(데모 소스의 'langs' 표 참고)와 이 데모에 포함되지 않은 일부 오른쪽에서 왼쪽으로 읽는 언어(예: he-IL, ar-EG)를 지원합니다.
언어를 설정한 후 recognition.start()를 호출하여 음성 인식기를 활성화합니다. 오디오 캡처를 시작하면 onstart 이벤트 핸들러를 호출한 다음 새 결과 세트마다 onresult 이벤트 핸들러를 호출합니다.
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
이 핸들러는 지금까지 수신된 모든 결과를 final_transcript 및 interim_transcript라는 두 개의 문자열로 연결합니다. 결과 문자열에는 사용자가 '새 단락'이라고 말하는 경우와 같이 \n이 포함될 수 있으므로 linebreak 함수를 사용하여 이를 HTML 태그 <br> 또는 <p>로 변환합니다. 마지막으로 이러한 문자열을 검은색 텍스트 스타일이 지정된 final_span 및 회색 텍스트 스타일이 지정된 interim_span와 같은 해당 <span> 요소의 innerHTML로 설정합니다.
interim_transcript는 로컬 변수이며, 이 이벤트가 호출될 때마다 완전히 다시 빌드됩니다. 마지막 onresult 이벤트 이후 모든 중간 결과가 변경되었을 수 있기 때문입니다. for 루프를 0으로 시작하여 final_transcript에 대해서도 동일하게 할 수 있습니다. 하지만 최종 텍스트는 변경되지 않으므로 이 이벤트가 event.resultIndex에서 for 루프를 시작하고 새 최종 텍스트만 추가할 수 있도록 final_transcript를 전역으로 만들어 코드를 조금 더 효율적으로 만들었습니다.
간단하죠? 나머지 코드는 모든 것이 멋지게 보이도록 하는 데만 사용됩니다. 상태를 유지하고 사용자에게 유용한 메시지를 표시하며 마이크 버튼의 GIF 이미지를 정적 마이크, 마이크 슬래시 이미지, 빨간색 점으로 깜박이는 마이크 애니메이션 사이에서 전환합니다.
mic-slash 이미지는 recognition.start()이 호출될 때 표시되고 onstart이 실행되면 mic-animate로 대체됩니다. 일반적으로 이 작업은 너무 빠르게 이루어져 슬래시가 눈에 띄지 않지만 음성 인식을 처음 사용하는 경우 Chrome에서 사용자에게 마이크 사용 권한을 요청해야 하므로 이 경우 onstart는 사용자가 권한을 허용할 때만 실행됩니다. HTTPS에서 호스팅되는 페이지는 권한을 반복적으로 요청할 필요가 없지만 HTTP에서 호스팅되는 페이지는 반복적으로 요청해야 합니다.
웹페이지에서 사용자의 소리를 들을 수 있도록 하여 웹페이지를 더욱 생생하게 만들어 보세요.
의견을 보내주세요.
Google에서 이 API의 음성 데이터를 처리하는 방식을 알아보려면 Chrome 개인 정보 보호 백서를 참고하세요.