見出し画像

表情で操作するオーディオイコライザーを作ってみた 【Face Audio Equalizer】

デザイニウム

初めまして！デザイニウムのBBOY/エンジニアの平澤（@eatora22）です。私が所属する東京オフィスでは日々様々なR&D（研究開発）を行っているのですが、その中から今回は「Face Audio Equalizer」をご紹介します。

はじめに

まずは以下のデモ動画をご覧ください。

お判りいただけたでしょうか？単眼カメラで撮影した人物の顔をリアルタイムで解析することで、表情の変化により操作することができるオーディオイコライザーとなっています！

本記事では使用している技術やシステム構成をざっくりご紹介します。

技術紹介

顔認識用のライブラリとして今回はface-api.jsを使用しました。これはTensorFlow.jsという機械学習用ライブラリとして有名なTensorFlowのJavaScript版をベースとして作成されたものです。ライセンスは「MIT License」となっており誰でも自由に使用することができます。

このライブラリを使用することで、顔上にある68個の部位の座標情報や
7つの表情（neutral、happy、sad、angry、fearful、disgusted、surprised）の識別結果などを取得することができます。

face-api.jsからの出力結果を使ったビジュアライズやオーディオファイルの取り扱いにはTouchDesigner（以下TD）を使用しました。私はTDを使い始めて間もないのですが、コードを一から書かずとも用意されたエフェクトを重ね合わせるだけで良さげなビジュアルを生み出したり、外部アプリケーションとの連携もしやすかったりと便利で使いやすい点がたくさんあります。一方であらかじめ決まったビジュアルを意図的に出すのはちょっと難しいかも……という印象です（精進します）。

他にも、JS側でのカメラ映像取り込みやGUI作成にp5.js、face-api.jsの出力結果を送信するための中継サーバーとしてNode.jsを使用しています（処理負荷軽減のためにTDの実行を別のPCで行うことも可能です）。

システム構成

画像1

簡単な図解ですが、システム構成としてはこのような感じです。補足としてface-api.js側からのデータ送信はWebSocketを利用していますが、TD以外とのアプリケーション連携も考慮してNode.jsサーバーではWebSocketに加えOSC通信にも対応しています。

さいごに

以上、「Face Audio Equalizer」をご紹介しました。他にもデザイニウムでは様々な開発を行っていますので、気になる方は是非SNSのアカウントもチェックしてみてください！

デザイニウムのインタラクティブ開発サイト
デザイニウム　You Tube チャンネル　
Facebook
Twitter
Wantedly 

この記事が気に入ったらサポートをしてみませんか？