どうも、まさとらん（@0310lan）です。
みなさんは、音声認識を活用していますか？
例えば、iOSの「Siri」と会話してみたり、Androidなら「OK Google」と喋って検索した経験があるのではないでしょうか？
今回は、このような音声認識を利用し、PCのChromeブラウザに喋りかけることで動作するサンプルデモのチュートリアルをご紹介しようと思います！
■音声認識に必要なAPIとは？
まず最初に必要なのが、自分の「声」を音声として認識してくれるAPIなのですが、実はPCのChromeブラウザであれば今すぐJavaScriptから利用できるようになっています。
「Web Speech API」を使うことで、特別なツールをインストールしたり、余計なライブラリを読み込む必要は無いわけです。
ちなみに、このAPIには大きく分けて「音声認識」と「音声合成」の2種類があり、今回使用するのは「音声認識(SpeechRecognition)」となります。
■必要なファイルを準備しよう！
利用すべきAPIが分かったところで、早速「サンプルデモ」の作成に取り掛かりましょう！
デモはシンプルな画面構成で、「ボタン」をクリックすると音声認識がスタートし、事前に設定した「合い言葉」を話すことで様々な機能を動作させるようにしたいと思います。
そこで必要となるのが、「index.html」と音声認識のプログラムを書く「app.js」ファイルの2つです。
画面がシンプルなので、「index.html」は簡単です。
「音声認識」用のボタンと、コンテンツ表示用の「divタグ」を設置するくらいで良いでしょう。
<!-- index.html --> <body> <h3>Web Speech APIサンプル</h3> <button id="btn">音声認識開始</button> <div id="content"></div> <script src="app.js"></script> </body>
そして、肝心の「app.js」ですが、驚くことに「音声認識」を使うための準備は以下の1行だけでOKです。
// app.js var speech = new webkitSpeechRecognition();
あとは、イベント処理を追記すればすぐに利用できるので、非常にお手軽と言えるでしょう。
これらを踏まえた「app.js」はこんな感じになると思います。
// app.js var btn = document.getElementById('btn'); var content = document.getElementById('content'); //音声認識APIの使用 var speech = new webkitSpeechRecognition(); //言語を日本語に設定 speech.lang = "ja"; btn.addEventListener( 'click' , function() { // ➀ボタンをクリックした時の処理 } ); speech.addEventListener( 'result' , function( e ) { // ➁音声認識した結果を得る処理 } );
音声の言語設定を「日本語(ja)」にしておき、2つのイベント処理を追記しました。
➀ 「音声認識」ボタンをクリックした時のイベント処理
➁ 認識した「言葉」を取得するイベント処理
基本的な構造はこれだけです！
ここから、少しずつ機能を追加していきたいと思います。
■ブラウザに喋りかけてみよう！
それでは、必要なファイルが準備できたので、いよいよ「ブラウザ」に喋りかけてみましょう。
音声認識をスタートさせるには、「speech.start()」を実行すれば良いので、クリックイベントに追記します。
// app.js btn.addEventListener( 'click' , function() { // 音声認識をスタート speech.start(); } );
これで、「音声認識ボタン」をクリックすれば認識が始まるので、Chromeブラウザに向かって喋りかければOK！
あとは、喋った「言葉」を取得しなければいけないので、「speech」イベント処理で取得した内容をひとまずコンソールに表示しましょう。
// app.js speech.addEventListener( 'result' , function( e ) { // 音声認識で取得した情報を、コンソール画面に表示 console.log( e ); } );
これで、Chromeブラウザに喋りかければ自分の声が認識されて、その情報がコンソールに表示されます。
ちなみに、「マイク」の使用許可を求めるポップアップが表示されると思うので、「許可」ボタンをクリックしておきましょう。
試しに、「こんにちは」と喋ってみましょう！
すると、以下のようにしっかりと認識されているのが分かります！
認識された「言葉」は、「results」配列内にある「transcript」に格納されているので、以下のようにすればJavaScript内で自由に使えます。
// 認識された「言葉」を、変数「text」に格納 var text = e.results[0][0].transcript;
そこで、認識された「言葉」を画面に表示させてみましょう！
// app.js speech.addEventListener('result', function( e ) { var text = e.results[0][0].transcript; // 認識された「言葉(text)」を、表示用のdivタグに代入する content.textContent = text; }
こうすれば、喋った「言葉」が認識されて、そのまま画面に表示されるようになります。
ここまでくれば、音声に反応するデモアプリも作れそうな気がしませんか？
つまり、事前に「合い言葉」を作っておき、変数「text」と比較することで「声」に反応する動作を作れるというわけです。
■「合い言葉」を喋ってみよう！
それでは、何でも良いので1つ「合い言葉」を決めてみたいと思います。
例えば、「ビデオ」と喋ったら画面にYouTubeの動画が再生されるようにしてみましょう！
認識された「言葉」が格納されている変数「text」と比較して、「ビデオ」という文字と同じだったらYouTube動画を表示する関数を作ります。
// app.js speech.addEventListener( 'result', function( e ) { var text = e.results[0][0].transcript; // 「ビデオ」と認識されたら指定の関数を実行 if( text === "ビデオ" ) getVideo(); } ); function getVideo() { // YouTube動画の表示処理 }
「getVideo()」の中身はYouTubeの「埋め込みタグ」をそのまま表示させるだけなので、まずは興味のある動画ページからタグをコピーしておきましょう。
そして、そのまま「getVideo()」へ挿入！
// app.js function getVideo() { var URL = '<iframe width="560" height="315" src="https://www.youtube.com/embed/TBEuMfNqv_k?rel=0&controls=0&showinfo=0;autoplay=1" frameborder="0" allowfullscreen></iframe>'; content.innerHTML = URL; }
これで、Chromeブラウザに向かって「ビデオ」と喋れば、自動的にYouTube動画が表示されるはず！
ちなみに「埋め込みタグ」のパラメータ内に「autoplay=1」を付与すれば、動画が自動的に再生されるようになるのでさらに便利です。
同じ要領で「TuneIn」の埋め込みタグを使って「ラジオ」を表示させることも出来るでしょう。
また、JavaScriptから「iframeタグ」を生成して、任意のWebページを表示させるのも面白いと思います。
検索サービスで有名な「DuckDuckGo」を使い、「検索」と喋ると「iframeタグ」でサイトを表示させるようにしてみましょう！
// app.js function getSearch() { // iframeタグを生成 var iframe = document.createElement('iframe'); iframe.width = '400px'; iframe.height = '400px'; // iframeのsrcに検索サイトを指定 iframe.src = 'https://duckduckgo.com/'; content.appendChild(iframe); }
これで、「検索」と喋ってみてください。
インラインフレームで、DuckDuckGoのサイトが表示されるのが分かります。
このままキーワードを入力すれば、Googleと同じように検索を行えます。
他にも、イベント検索APIを使えば、「イベント」と喋るだけで指定エリアで開催する「イベント一覧」も表示できるようになるでしょう。
以下にある、サンプルデモのリンクをクリックして、ぜひ実際に「声」を出して試してみてください！
※PCのChromeブラウザ推奨
※「マイク」の使用を許可してください
「サンプルデモ」の全ソースコードはコチラから確認できます。
github.com
■paizaについて
paizaでは、プログラミングスキルチェック問題(14言語に対応)を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです！
paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの６段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください！！
プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。
さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)」では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください！
■まとめ
今回のように、自分の「声」でWebページが変化するというのは意外と面白くて、アイデア次第ではまだまだユニークなWebアプリが作れると思います。
仕組みがシンプルで簡単なこともあり、プログラミングを勉強中の方でもオリジナルのプロジェクト作品を作りやすいのではないでしょうか。
ぜひ、みなさんもユニークな発想を駆使して、「音声」に反応するサービスを作ってみましょう！
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
