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

Post on:2013年9月13日

sponsorsr

ユーザーの声をトリガーにしてウェブページのさまざまなインタラクションを実行できるスクリプトを紹介します。マイクなどで「Hello!」と話すとメッセージを表示したり、ネコの画像をFlickrから呼び出したり、エレメントをアニメーションで表示することもできます。

jQueryなど他のスクリプトは必要なく、しかも超軽量の2KB！
いろいろな可能性が広がるスクリプトですね。

annyang!
annyang! -GitHub

annyang!のデモ
annyang!の使い方

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>