AncomWiki

Web Speech API 소개 및 구현 가이드

Properties1
description이 문서는 HTML5 Web Speech API(구체적으로 Chrome의 `webkitSpeechRecognition`)를 사용하여 웹 페이지에 음성 인식 기능을 추가하는 방법을 설명합니다. 주요 구현 단계는 브라우저 지원 확인, `continuous`(연속 인식) 및 `interimResults`(임시 결과 표시) 속성 설정, 언어(`lang`) 지정, 그리고 `onstart`, `onresult`, `onerror`, `…

9 min read

Web Speech API 소개 및 구현 가이드

Source

  • Evernote/Advanced View Required/Voice Driven Web Apps Introduction to the Web Speech API.md

Summary

이 문서는 HTML5 Web Speech API(구체적으로 Chrome의 webkitSpeechRecognition)를 사용하여 웹 페이지에 음성 인식 기능을 추가하는 방법을 설명합니다. 주요 구현 단계는 브라우저 지원 확인, continuous(연속 인식) 및 interimResults(임시 결과 표시) 속성 설정, 언어(lang) 지정, 그리고 onstart, onresult, onerror, onend 이벤트 핸들러를 통한 음성 데이터 처리입니다. 최종 결과(isFinal)와 임시 결과를 구분하여 UI에 반영하는 로직과, 마이크 권한 요청 시 HTTPS 환경의 중요성(반복 권한 요청 방지)을 강조합니다.

Key Points

  • Web Speech API는 Chrome 25 이상에서 음성 인식을 지원하며, 실험적 단계이므로 webkitSpeechRecognition 접두사를 사용합니다.
  • continuous: true 설정 시 사용자가 일시 정지해도 인식이 계속되며, interimResults: true 설정 시 실시간으로 변경될 수 있는 임시 결과를 받을 수 있습니다.
  • 음성 인식 언어는 BCP-47 코드(예: ‘en-US’)로 설정하며, 미설정 시 HTML 문서의 lang 속성을 기본값으로 사용합니다.
  • onresult 이벤트에서 isFinal 속성을 통해 확정된 텍스트와 임시 텍스트를 구분하여 처리해야 합니다.
  • 마이크 권한 요청 시 HTTPS 호스팅 페이지는 반복적인 권한 요청을 피할 수 있으나, HTTP 페이지는 매번 요청할 수 있습니다.

그래프 뷰

백링크