こんにちは。
普段は音声に関わる開発をしていることが多いです。
Astersik, Amazon Connect, twilio, Google Speech API…などなど。
仕事をしていて思うのは、普段は意識していなくてもいろいろなところに音声の技術は使われているんだなーということです。
昨今はWebサービスやスマホのアプリケーションから音声認識や音声入力を行うということは当たり前になってきています。
Googleの日本語版音声検索にいたっては、なんとリリースされてから10年も経つというから驚きです！
音声の技術というのはどんどん身近なものになっています。
今回のブログでは、おそらく最も簡単に音声認識・音声入力を扱うことができる、
Web Speech APIについて紹介したいと思います。
実装の簡単さに対しての認識精度の高さにびっくりすると思います！
まずは実際に動かしてみよう
以下のサンプルで実際に動きを見てみてください。
「音声入力でGoogle検索開始！」ボタンをクリックすると音声入力及び自動でGoogle検索が行われます。
下の「status」は現在の状態を表しています。
※Chromeのみしか対応していません
Web Speech APIとは？
Webページ上で音声認識、音声合成を利用することができるJavascriptのAPIです。
サーバーベースでもクライアントベースでも、APIを埋め込むことで音声認識、音声合成のどちらも利用することができます。
今回のデモで利用しているのは音声認識のAPIのみです。
内部ではGoogleのCloud Speech APIが動いているようですが、参照したページでは記載がありませんでした。
ブラウザ対応状況は、音声認識はCromeしか対応していませんが、音声合成が多くのブラウザで対応しているようです。
参照：Web Speech API
ソースコードを見る
HTML部分
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div style="border:1px solid #000;"> <div id="result_text"></div> <form name="googleform" target="newtab" action="http://www.google.co.jp/search" method="GET" style="display:none;"> <input type="hidden" name="hl" value="ja"> <input type="hidden" name="q" id="search_param" maxLength="255" size="30"> </form> <input type="submit" id="start_recognition" value="音声入力でGoogle検索開始！" style="color:#000; background-color:#ff9b00cf;"> </div> <br> <div id="status"> status: stop </div> |
HTMLでは認識結果を表示する枠組と、Google検索を行うフォームの定義のみを行っています。
submitボタンがformタグの外にあるのは、submitボタンのデザインを使うために利用しているだけです。
このボタンを押してもformが直接submitされるわけではありません
JavaScript部分
|
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 32 33 34 35 36 37 38 39 40 41 |
<script type="text/javascript"> var speech_count = 0; document.getElementById("start_recognition").onclick = function vr_function() { var result_text = document.getElementById('result_text'); while (result_text.firstChild) { result_text.removeChild(result_text.firstChild); } SpeechRecognition = webkitSpeechRecognition || SpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'ja'; recognition.interimResults = true; recognition.continuous = true; recognition.onresult = function(event) { var results = event.results; if (document.getElementById('interim_result') == null) { var interim = document.createElement('d' + 'iv'); interim.setAttribute('class', 'results'); interim.setAttribute('id', 'interim_result'); document.getElementById('result_text').appendChild(interim); } for (var i = event.resultIndex; i < results.length; i++) { if (results[i].isFinal) { speech_count++; result_line = "<font size='4'>" + results[i][0].transcript + "</font>"; document.getElementById('interim_result').innerHTML = result_line; document.getElementById('interim_result').setAttribute('id', 'result' + speech_count); document.getElementById('search_param').setAttribute('value', results[i][0].transcript); document.googleform.submit(); document.getElementById('status').innerHTML = "status: searched!"; recognition.stop(); return; } else { document.getElementById('interim_result').innerHTML = "<font size='4' color='gray'>" + results[i][0].transcript + "</font>"; flag_speech = 1; } } } document.getElementById('status').innerHTML = "status: recording..."; recognition.start(); } </script> |
長いですが、大半はDOM操作になっています。
主要な部分は、
- 8 ~ 12行目 SpeechRecognitionクラスのインスタンスのセットアップ
- 13行目 認識結果が返ってきたときのイベントをキャッチするファンクション
- 22行目 認識結果が認識終了結果なのかのチェック
- 39行目 実際に認識を開始するポイント
となっています。
WordPressの投稿に直接埋め込むために空行をなくしたり、divタグを明記しないようにしています。
おわりに
このように、Web Speech APIを利用すれば、JavaScriptだけで音声認識、音声合成をシステムに組み込むことができます。
とても簡単に使えて組み込めるのがいいですね！
音声のインターフェースを組み込むことでユーザーの操作の幅が広がり、UXの改善にもつながるのではないでしょうか。
ぜひ一度トライしてみてください！
ではでは～。
- AWS Step Functionsの基本を再学習しました - 2024-09-23
- Amazon SESでバウンスメールを管理する - 2024-07-07
- TEAMをv1.1.1にアップデートしカスタムドメインを設定する - 2024-02-17
- コールセンター白書2023とAmazon Connect - 2023-12-25
- Provide dynamic and personalized CX with in-app web call for Amazon Connect - 2023-12-16
【採用情報】一緒に働く仲間を募集しています
