html 5 기반의 음성입력 Speech Input 추가

 Google HTML5 Presentation 에서 소개된 Speech input입니다. Speech Input는 구글에서 제공하는 음성을 통한 입력을 지원하게 됩니다. html 5 기반으로 동작하며 Chrome 브라우저에서만 동작합니다. 크롬 브라우저 중에서도 모바일 기기에서는 동작하지 않습니다.

 아래 홈페이지에 구글에서 소개한 html 5 Presentation을 볼 수 있습니다.

 http://slides.html5rocks.com/#speech-input

 제 블로그에 한 번 추가해봤습니다. 검색 버튼과 글 작성하는 부분에 추가하였고, Chrome에서만 보이고, 동작하게 됩니다. 간단한 코드 추가로 동작하고, input에 만 추가가 됩니다. textarea에 추가를 할 순 없어서 input과 css, javascript를 이용해서 추가하는 방법이 있습니다.

 메인 화면의 검색 버튼에 추가된 모습입니다.

 방명록에 추가되어 있는 모습입니다. textarea에도 추가는 할 수 있지만 음성인식률이 높지 않아서 추가하진 않았습니다.

추가하는 코드는 아래와 같습니다. html/css를 열고 input를 검색합니다. 아래는 메인화면의 search_text에 적용된 모습입니다.

input 코드 끝에

speech x-webkit-speech

를 추가하면 적용이 완료됩니다.

마무리

 그냥 구글 voice 입력을 찾다가 찾아서 한번 적용해보았습니다. 단어 검색에는 좋은 듯 하네요^^;; 검색이 완료되면 바로 검색을 하도록 javascript를 사용할 수 도 있습니다.