[JS]これはスゴイ！人の声でウェブページをコントールできるようにするスクリプト -annyang!

サイト構築 -JavaScript

Post on:2013年9月13日

annyang!のデモ

デモはChromeで、マイクがある環境でご覧ください。
Speech Recognitionに対応したブラウザとのことで、現状デスクトップではChromeだけのようです。

音声でコントロールするので分かりにくいかもしれませんが、静止画のキャプチャでデモを紹介します。

デモ

まずは一番簡単なデモから。

デモ：Say "Hello!"

マイクに「Hello!」と言うと対応したメッセージが表示されます。

Annyang!と表示されます。

今度はFlickrから指定した画像を取得します。
「Show me cute kittens!」と言うとネコの画像をFlickrから取得します。

任意の言葉でも対応しており、「Japan」と言ってみたら芸者さんの画像を取得してきましたｗ

最後は、ページ下部からエレメントをアニメーションで表示します。
「Show TPS report」とマイクに向かって言います。

下部からアニメーションでエレメントを表示

annyang!の使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。
jQueryなどの他のスクリプトは必要ありません。

<script type="text/javascript" src="annyang.min.js"></script>

Step 2: JavaScript

スクリプトの基本書式は、トリガーとなる言葉をコマンドとして指定し、実行するスクリプトを記述します。
下記は、最後のデモのエレメントをアニメーションで表示するスクリプトです。

<script type="text/javascript">
if (annyang) {
  // Let's define our first command. First the text we expect, and then the function it should call
  var commands = {
    'show tps report': function() {
      $('#tpsreport').animate({bottom: '-100px'});
    }
  };

  // Initialize annyang with our commands
  annyang.init(commands);

  // Start listening. You can call this here, or attach this call to an event, button, etc.
  annyang.start();
}
</script>

Flickrのデモのように任意の言葉にはワイルドカードを使用してコマンドを取得し、スクリプトを実行します。

<script type="text/javascript">
var commands = {
  // annyang will capture anything after a splat (*) and pass it to the function.
  // e.g. saying "Show me Batman and Robin" is the same as calling showFlickr('Batman and Robin');
  'show me *term': showFlickr,

  // A named variable is a one word variable, that can fit anywhere in your command.
  // e.g. saying "calculate October stats" will call calculateStats('October');
  'calculate :month stats': calculateStats,

  // By defining a part of the following command as optional, annyang will respond to both:
  // "say hello to my little friend" as well as "say hello friend"
  'say hello (to my little) friend': greeting
};

var showFlickr = function(term) {
  var url = 'http://api.flickr.com/services/rest/?tags='+tag;
  $.getJSON(url);
}

var calculateStats = function(month) {
  $('#stats').text('Statistics for '+month);
}

var greeting = function() {
  $('#greeting').text('Hello!');
}

</script>