HTML5 x-webkit-speech

日記

対応するテキストボックスに簡単に音声入力を追加できるようなので追加してみた。右上の検索ボックス。

やったこと。

  1. x-webkit-speechをtextinputに追加
  2. onwebkitspeechchangeイベントでformのsubmitを呼ぶように
  3. onfocus/onblurで”SEARCH”というplaceholderを表示したり消したりしていたけれど、音声認識が始まるとonblurが呼ばれてplaceholderがセットされ、認識結果の前にくっついてしまうので、とりあえずplaceholderはonmousemove/outイベントでコントロールするように

とりあえず問題なく動いてそうに見える。