しまてく

学んだ技術を書きためるブログ

ブラウザの音声認識と音声合成を使ってなんちゃってiliを作ってみた。

突然ですが、みなさん ili というプロダクトをご存知でしょうか?
iamili.com


このサイトで公開されている動画のイケメン男性が英語で日本人女性を口説く
流れを追ったものなのですが、その便利さとイケメンさが相まって最後には
突然のキスをするというアレな感じの動画ですね。

とはいえこの動画に出てくるiliというプロダクトは言語の壁を破るという点でとても可能性を感じました。

自作してみた。

今のhtml5周りでは音声認識音声合成がだいぶ使えるようになってきているので
今回はそれとmicrosoftの翻訳apiを利用してなんちゃってiliを作ってみました。

実際の成果物は以下になります。pcでも良いですが、レイアウトをスマホ用に
作り込んでいるのでchromeが使えるスマホでアクセスするのがいいと思います。
talktrans.herokuapp.com
f:id:cimadai:20160131154448g:plain

参考にしたサイトは以下です。
qiita.com


qiita.com

環境

  • サーバー

heroku

node.js (5.5.0) + express

システム構成

f:id:cimadai:20160131154410p:plain

ソースコード

npmで入れるもの。

  • npm install express-generator -g
  • npm install --save xml2js
  • npm install --save request
  • npm install --save express

基本的にexpressコマンド(express-generatorで入る)で作成したプロジェクトをそのまま使っています。

server side

talktrans - server side

サーバーサイドのtranslate.jsにmicrosoft apiのclient_idとclient_secretを入れる必要があるのですが、
これは自分で取得したものを入力してください。

client side

talktrans - client side

まとめ

これで英語圏の美女に対して無双ができるという算段です!
便利な世の中ですね!!