티스토리 뷰

크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
본문

 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를 사용할 수 도 있습니다.



개인 광고 영역


댓글
댓글쓰기 폼
Total
5,182,153
Today
230
Yesterday
1,549
«   2018/08   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
글 보관함