しゃのんあどべんとかれんだー 20 日目 (JavaScript Web Speech API を試してみました。Speech Recognition API 編) 匿名 匿名 この記事は、しゃのんあどべんとかれんだー 20 日目の記事です。 ![HTML5](http://1.bp.blogspot.com/-Pr0tNaWohT8/Vopzto9-LJI/AAAAAAAAAWY/B4ygjZ01BTo/s200/html5-badge-h-solo.png) どうも、munepom (`@__munepom__`) です。 今回は、JavaScript の Web Speech API を試してみたおはなし その 1 です。 # [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) ブラウザベースで音声認識とテキストの読み上げを実現する API です。 まだ実験的機能のようでして、対応ブラウザはコロコロ変わる可能性があるので、[Can I Use](http://caniuse.com/#search=speechsynthesis) などで利用可能かどうか確認してください。 # 音声認識を試してみました まずは、音声認識を試してみましょう! Speech Recognition API を使用すると、PC に接続されたマイクからの入力音声を解析し、テキスト変換させることができるようです。 ブラウザでの実行時、マイクデバイスへのアクセス許可が必要ですので、ご注意ください。 Chrome でのみ動作確認できましたが、input タグに x-webkit-speech 属性を追加して、 下記のような JavaScript で、手軽に Speech Recognition API を試せると思います。 Mac OS X の Chrome 47.0.2526.106 で動作確認できました。 ``` if (SpeechRecognition || ('webkitSpeechRecognition' in window) ) { var SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition; var recognition = new SpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.onresult = function(event) { // console.log(event); elmView.value = event.results[0][0].transcript; recognition.stop(); } recognition.onspeechend = function() { recognition.stop(); } recognition.onnomatch = function(event) { elmView.value = '認識できませんでした。。。'; } recognition.onerror = function(event) { elmView.value = '例外が発生しました: ' + event.error; } var elmView = document.querySelector('#RecognitionView'); document.querySelector('#RecognitionButton').addEventListener('click', function(e) { recognition.start(); }); } // end ``` 言語設定や音声認識のタイムアウト時間など、細かく設定できて、楽しいですね! 一旦マイクの使用許可を与えると、バックグラウンド動作もさせられましたので、 使いようによっては、会話内容をサーバへ転送して解析ごにょごにょ...といったこともできそうですね。 セキュリティ的にちょっと注意した方が良さそうです。 ##### 参考資料 https://dvcs.w3.org/hg/speech-api/raw-file/9a0075d25326/speechapi.html https://github.com/0xPr0xy/HTML5-webspeech/blob/master/speech.html たまには息抜きして、レッツ Enjoy! (・ω・)ノ Tweet Share Share Share Share