読者です 読者をやめる 読者になる 読者になる

ブラウザで音声入力をしてGoogle検索

f:id:haru-komugi:20140712151950j:plain

ブラウザで音声入力をして、Google検索を行います。

サンプルはこちら
http://moeten.info/js/20140712_speachApi/
スマートフォンChromeで試してみてください。

ソースコードはこちら
index.html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">

    //グーグル検索ライブラリのロード
    google.load( 'search', '1' );

    //jQuery初期化関数
    $(function(){

      //
      var recognition;
      var webSearch;

      //初期化
      function init(){

        //スピーチの初期化
        initSpeech();

        //イベントリスナーの登録
        addEventListener();

      }

      //スピーチの初期化
      function initSpeech(){

        //スピーチの作成
        recognition = new webkitSpeechRecognition();
        recognition.lang = "ja-JP";

        //話し声の認識中
        recognition.onsoundstart = function(){
          $("#state").text("認識中");
        };

        //マッチする認識が無い
        recognition.onnomatch = function(){
          $("#recognizedText").text("もう一度試してください");
        };

        //エラー
        recognition.onerror= function(){
          $("#recognizedText").text("エラー");
        };

        //話し声の認識終了
        recognition.onsoundend = function(){
          $("#state").text("停止中");
        };

        //認識が終了したときのイベント
        recognition.onresult = function(event){
          var results = event.results;
          for (var i = event.resultIndex; i<results.length; i++){
            $("#recognizedText").text(results[i][0].transcript);
          }

          //スピーチ結果を使ってグーグル検索をする
          webSearch.execute(  $("#recognizedText").text() );

        };

      }

      //イベントリスナーの登録
      function addEventListener(){

        $("#startButton").bind("click",function(){
          recognition.start();
        });

      }

      //グーグルサーチのロード
      google.setOnLoadCallback( searchApiOnLoad );

      //ロード完了イベント
      function searchApiOnLoad(){

        //サーチAPIの初期化
        webSearch = new google.search.WebSearch();
        webSearch.setSearchCompleteCallback( this, SearchApiComplete, [ webSearch ] );

      }

      //サーチ結果イベント
      function SearchApiComplete( searcher ){

        //結果を出力する
        var len =  searcher.results.length;
        var result = "";
        for( var i = 0 ; i < len ; i ++ ){
          var item = searcher.results[i];
          result = result + "<p><a href='" + item.url + "'>"+ item.titleNoFormatting +"</a><br/>"+ item.content + "</p>";
        }

        //グーグル検索の結果を出力
        $("#result").html( result );

      }

      //初期化
      init();

    });

    </script>
  <style type="text/css">
    body{
      text-align: center;
      font-size: 14px;;
      line-height: 1.5;
    }
    #startButton{
      background: #ffc578;
      background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23));
      background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%);
      background: -o-linear-gradient(top, #ffc578 0%,#fb9d23 100%);
      background: -ms-linear-gradient(top, #ffc578 0%,#fb9d23 100%);
      background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 );
      padding: 7px 12px;
      border: 1px solid gray;
      outline: none;
      outline: navajowhite;
      box-shadow: 0 0 3px gray;
      border-radius: 4px;
      font-size: 22px;
      font-weight: bold;
      color: rgb(0, 0, 0);
      text-shadow: 1px 1px 1px white;
      margin-bottom: 20px;
    }
    #recognizedText{
      border: 1px solid rgb(165, 165, 165);
      border-radius: 10px;
      font-weight: bold;
      font-size: 20px;
      padding: 5px 10px;
      display: inline;
      background: rgb(255, 252, 226);
    }
    #result{
      font-size: 12px;
      text-align: left;
      border: 1px solid rgb(165, 165, 165);
      border-radius: 10px;
      padding: 10px;
    }
  </style>
  </head>
<body>
<h3>音声検索テスト</h3>
<input id="startButton" type="button" value="音声入力スタート"/>
<div>状態:<span id="state">停止中</span></div>
<p>認識された言葉</p><p id="recognizedText">----</p>
<h3>検索結果</h3>
<div id="result">こちらにGoogle検索の結果が表示されます。</div>
</body>
</html>

そろそろ時計型のAndroidが流行ってきますので、音声入力が流行るのかなっと