ElectronとSocket.ioでBotと音声チャット

人工無脳と気楽に会話出来るように音声チャットのテンプレートを作ってみました。

PonDad/electron_voice_chat - GitHub

こんな感じです。

electron_voice_chat - YouTube

ElectronでSocket.ioを使う

こちらの記事を参考にしました。

Electron+Node.js+jQueryで最小構成チャット - Qiita

最初expressを使ってローサルサーバーを立てなきゃいけないと思っていたんですけど、

var io = require('socket.io').listen(3000);

これだけでローカルサーバーが立てられるとは知りませんでした。こちらのサンプルを元に音声入力、出力を追加します。

annyan.js & responsiveVoice.js

音声入力と出力はJSライブラリのAnnyan.js、ResponsiveVoice.jsを利用します。入出力はこちらのライブラリを参考にしました。

augustogoncalves/personal-assistant - GitHub

一番のポイントはannyan.jsをnode.jsのモジュールとして読み込んでいることです。（ElectronのクライアントサイドでWebSpeechRecognitionAPIを読み込むとエラーになってしまいます。）

js/app.js

var annyang = require('annyang');
var socket = require('socket.io-client')('http://localhost:3000');
var commands = {'*i': function() {console.log("実行")}};

  annyang.addCommands(commands);
  annyang.setLanguage('ja');
  annyang.start();
  console.log('録音開始');
  document.getElementById('recording').textContent = '録音開始';
  annyang.addCallback('resultMatch', function(userSaid) {
    console.log('録音: ' + userSaid);
    socket.emit('chat_message', userSaid);
  });

socket.on('msg', function(msg) {
  console.log('返信: ' + msg);
  say(msg);
});

function say(msg, callback) {
  console.log('発話: ' + msg);
  document.getElementById('messages').textContent = msg;
  annyang.abort();
  console.log('録音停止');
  document.getElementById('recording').textContent = '録音停止';

  responsiveVoice.speak(msg, 'Japanese Female', {
  　onend: function() {
      annyang.start();
      console.log('録音再開');
      document.getElementById('recording').textContent = '録音再開';
    }
   });
};

あとはannyang.jsのドキュメントに沿った形で記述します。ドキュメントでは音声アシスタントように「音声認識」→「キーワード一致」→「実行コマンド」というパターンですが、今回は人工無脳と音声でやりとりすることを考え、認識した音声を*iを使って全てサーバーサイドに送るようにしました。

server.js

var io = require('socket.io').listen(3000);
io.sockets.on('connection', function(socket) {
  socket.on('chat_message', function(data) {
    var bot_reply =  data + 'だボット';
    io.sockets.emit('msg', bot_reply);
  });
});

サーバーサイドでは入力音声をオウム返しするようにしてみました。

サーバーサイドで受け取った音声データを基にしてAPIからjsonデータを取得したり、人工無脳とやりとりしたり、といったことが出来ると思います。

サーバーの立ち上げを手動でするのが面倒なので

main.js

//略
var exec = require('child_process').exec;
exec('node server.js', function(err, stdout, stderr){
  if (err) { console.log(err); }
});
//略

child_process.execで起動させてみました。

まとめ

最近人間と話すよりBotと会話する方が多くなっている気がします。（それでいいのか・・・）。

それはさておき、サンプル動画をご覧になった方は分かると思うのですが私のカミカミの早口言葉を良く認識出来るもんだと感心します。さすがGoogle先生といったところでしょうか。