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

凹みTips

C++、JavaScript、Unity、ガジェット等の Tips について雑多に書いています。

SimSimi API x Web Speech API x OpenJTalk x mmd.gl.enchant.js でブラウザ上で音声対話できるヤツ作った

JavaScript HTML5 Node.js

はじめに

SimSimi とは巷で噂の凄いチャットロボットです。


で、この SimSimi さんですが、API を公開しています。

無料では使用制限があるようで 1ヶ月しか使えない & 日毎に使える回数制限があるみたいですが、お試しに登録してみました。
これを使えば音声対話出来るんじゃない?と思って、前作った Web Speech API で遊んでみた - 凹みTips のミクさんと音声対話できるものを作ってみました。

デモ

Youtube デモ

音声はミクさんでなく、MMD Agent のメイちゃんの声をお借りしています。


上部ふきだしが認識結果、返答が SimSimi API を使ったものです。酷い会話になってます。

オンラインデモ

Chrome のβ版(v25)以降でないと動かないのでご注意を。

API 制限結構早く来るので会話できないかもしれません(2013/03/16 期限切れました)
Web Speech API の話ですが、雑音は「うー」として認識されてしまうことが多いようです。

解説

mmd.gl.enchant.js や Web Speech API については過去のエントリを御覧ください。

入力を受け取ってそれを SimSimi API に渡し、OpenJTalk で wav を生成、それを返すサーバを Node.js で立てるコードは以下の様な感じです。

TTS サーバのコード例
var fs          = require('fs');
var http        = require('http');
var querystring = require('querystring');
var OpenJTalk   = require('openjtalk');
var mei1        = new OpenJTalk();

http.createServer(function(req, res) {
  var text = querystring.parse(req.url.slice(1)).text;
  if ( errCheck(text === undefined, 'Invalid parameters', res) ) return;
  console.log('query: ' + text);
  var query = {
    key : 'SimSImi のキー',
    lc  : 'ja',
    ft  : 1.0,
    text: text
  };
  http.get({
    host: 'api.simsimi.com',
    path: '/request.p?' + querystring.stringify(query)
  }, function(simsimiRes) {
    var jsonStr = '';
    simsimiRes.on('data', function(chunk) {
      jsonStr += chunk;
    }).on('end', function() {
      var response = JSON.parse(jsonStr).response;
      if (response === undefined) response = 'API 制限を超えているかエラーです。';
      mei1._makeWav(response, 240, function(err, result) {
        if ( errCheck(err, 'Error at making wav file', res) ) return;
        console.log('  -->' + response);
        fs.readFile(result.wav, 'binary', function(err, file) {
          if ( errCheck(err, 'Error at reading file', res) ) return;
          res.writeHead(200, {'Content-Type': 'audio/wav'});
          res.write(file, 'binary');
          res.end();
        });
      });
    });
  });
}).listen(12000);

function errCheck(err, msg, res) {
  if (err) {
    res.writeHead(400, {'Content-Type': 'text/plain'});
    res.write(msg);
    res.end();
    return true;
  }
  return false;
}

process.on('uncaughtException', function (err) {
  console.log('Error: ' + err);
});

これで、「http://(ホスト名):12345/text=こんにちわ」とかにアクセスすると「こんにちわ」という wav を配信してくれるサーバが出来ます。これを以下のコードで再生すれば OK です。

wav をブラウザで再生するコード例
var audio = new Audio('');
audio.autoplay = true;
audio.src = 'http://(ホスト名):12345/text=' + recogStr;
audio.load();
audio.play();

Web Speech API と mmd.gl.enchant.js と繋げばめでたく音声チャットできる3Dアバターが完成します。

おわりに

SimSimi API 面白いですね。Twitter とかから学習しているのか、会話自体から学んでいるのか…。
世の中の技術の進歩でつなぎ合わせるだけで簡単にこういったプロトが作れるようになったのは、ほんとうに素晴らしいですね。