「ひらけゴマ！」と喋るとChromeブラウザの新規タブが開くようにプログラミングしてみた！ : うえぶはっく

「音声認識」の勉強を兼ねて、簡単なサンプルデモをご紹介！

タイトルにある通り、パソコンの前で「ひらけゴマ！」と喋ることで、自動的に新規タブを追加するという単純なモノです…。

JavaScriptのコードはさらに単純で、30行も書かずに完成してしまいますので、気軽に試せると思いますよ！

必要なファイルを準備しよう！

今回利用するのは、以前から話題になっている「Web Speech API」です！

どんな機能を持っているかは、Googleが公開しているサンプルデモが分かりやすいのですが、さらに分かりやすくご紹介するために今回の「ひらけゴマ！」サンプルを使ってみようと思います。

事前に用意するのは、「HTMLファイル」と「JavaScriptファイル」の2つだけ！

まず、「index.html」ファイルを作り、音声認識を開始する「ボタン」と、これから作る「app.js」ファイルを読み込みます。

<!-- index.html -->

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Web Speech API</title>
  </head>
  <body>
    <button id="btn">音声認識スタート</button>
    <p id="info"></p>
    
    <script src="app.js"></script>
  </body>
</html>

「HTMLファイル」はこれで完了です。(このあとは、もういじりません…)

次に、以下のような「app.js」ファイルを作りましょう！

// app.js

var 
  btn = document.getElementById('btn'),
  info = document.getElementById('info'),

  // 音声認識の利用
  speech = new webkitSpeechRecognition();

btn.addEventListener('click', function() {

    // 音声認識が始まった時に行う処理を書く

});

speech.addEventListener('result', function(event){

    // 解析された「言葉」を使った処理を書く

}, false);

ポイントは、「音声認識」の機能を利用するためのAPI「webkitSpeechRecognition()」です。

この1行を書くだけで、変数「speech」を使って高度な音声認識が利用できるようになるのは驚きです。

あとは、ボタンのクリックイベントと、喋ったあとに解析された「言葉」を使った処理を書けばOKというわけです。

「音声認識」を使ってみよう！

とりあえず、何か喋ってみたいところなのですが、このままでは反応しません…。

まず、最初の設定として「何語」で喋るのかをブラウザに教える必要があります。そこで、先ほど作った「speech」変数に言語設定を書きます。

speech.lang = "ja";

恐らく、みなさんは日本語で喋ると思いますので、「日本語 = ja」という設定をしておきます。(英語なら「en」)

次に、「音声認識」を開始するには…、

speech.start();

でOK！

この状態で何かしゃべると、自動で解析されて結果が返ってきますので、この情報を受け取るようにしてあげれば良いわけです。

そこで、app.jsを以下のように修正してみます。

// app.js

// 日本語を設定
speech.lang = "ja";

// 開始ボタンをクリックした時の処理
btn.addEventListener('click', function() {

    // 音声認識の開始
    speech.start();

});

// 解析された結果の取得
speech.addEventListener('result', function(event){

    // 結果をコンソールログに出力
    console.log(event);

}, false);

これで、index.htmlファイルをブラウザで開き、表示されたボタンをクリックすれば「音声認識」が開始されます。

とりあず「あああ」とか喋ってみると、コンソールログに自動で以下のような情報が返ってくるのが分かります。

よーく見ると、解析された「言葉」が「results」配列内に存在するのが分かります。

ということは、この解析された「言葉」を使って条件分岐させてやれば、音声で「新規タブ」を開くのは簡単に実現できそうです。

「ひらけゴマ！」を使ってみよう！

先ほどのコンソールログに表示されている情報から、「results」配列にある解析された「言葉」を取得するには、「evnet」変数を使い…、

event.results[0][0].transcript;

とすれば、取得可能です。

あとは、この「言葉」が「ひらけゴマ」と同じかどうかを条件分岐させるだけですね。

speech.addEventListener('result', function(event){
    var text = event.results[0][0].transcript;
  
    if(text === "ひらけごま") {
        window.open();
  }
}, false);

「新規タブ」を開くには「open()」を使えば良いでしょう。

任意のURLを指定したい場合は、「open("任意のURL")」とすればそのWebページが開いてくれます。

以下に、サンプルデモを用意してみたので、ぜひ試してみてください！

See the Pen EKjpqR by webhacck (@webhacck) on CodePen.

恐らく、初回は「マイクの使用許可」を求められると思いますので「許可」ボタンをクリックして、そのまま喋ってみてください。