Electronで、VJをしよう!①音とDOMの連動

  • 25
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

案件がひと段落し、年末モードに入っております。

今回は、oFでもPepperでもなく、今話題のElectronをグリグリしてjavascriptでデスクトップアプリを作成してみましょう!

はじめて触るので、普通にブラウザを作ってもいいのですが、WebAudio APIを使って、ブラウザ+VJツールに改造します。

いつもみているサイトが音に反応して、形が変わったら、面白そうですよね。

弊社のサイトは、音に合わせて、このように。
image.gif
普通にブラウジングしたい人には、迷惑なだけですね。

Electron

インストール

Terminal
# グローバルにインストール electronコマンドが使えます
npm install electron-prebuilt -g

node.jsが入っていない方は、まずそちらからインストールしてください。

ウィンドウを開く

Quick Startを参考に、ウィンドウを開く実装をしましょう。

ほとんど、htmlで実装されていて、アプリケーション部分が、すごく簡単にできるのに、驚かされますね。

WebAudio API

下記URLにWebAudioについて、記述があります。
https://github.com/atom/electron/blob/master/docs/api/browser-window.md

一般的なブラウザから見た場合、現在は、https対応したサイトか、localhostでないと動きませんが、webPreferences/webaudioはデフォルトでtrueなので、ソースを修正することなく、使えそうです。
experimentalFeatures, experimentalCanvasFeaturesってのもあるので、結構やりたい放題できそうですね。

説明すると長くなってしまうため、実装方法は省略します(ソースは、置いておきます)。
以下を参考にすれば、WebAudio APIの概要はつかめると思います。

http://www.html5rocks.com/ja/tutorials/webaudio/intro/
http://www.cyokodog.net/blog/web-audio-api-music/
http://qiita.com/fnobi/items/2f08a67800dec1d61f21

今回は、AnalyzerNode#getByteFrequencyDataを使用しました。

WebView

いままでは、アプリケーションのインターフェースを作っていました。
ブラウザでいうウェブサイトを表示している部分がWebViewとなります。
https://github.com/atom/electron/blob/master/docs/api/web-view-tag.md
disablewebsecurity属性がある。 たのしそうだ怖いなぁ・・・。

index.html
<webview id="aqWebView" src="http://www.aquaring.co.jp/" autosize="on" preload="./js/webview.js"></webview>

弊社のサイトのトップページを表示しています。
preloadで指定したjsファイルを表示ページに注入して実行させることで、表示された側のオブジェクトの形を変更します。

アプリケーションとWebViewとの通信

IPCという仕組みを使って通信します。

アプリケーション側

js/script.js
awv.send('analyzeAudioData', dataArray);

メインウィンドウとなるhtmlファイルで読み込みます。

WebView側

js/webview.js
ipc.on('analyzeAudioData', function(event, data){
    // 処理
    document.getElementById('logo').style.transform = "rotate(" + data[1]*10 + "deg)";
});

さきほど、preloadで設定したjsファイルに記述します。
アプリケーション側で音声を解析し、解析結果を、WebView側に投げて、結果にあわせロゴを回転させています。

ソース

今回のソースは以下に置いてあります。
https://github.com/aquaring/ElectronVJ
まだ簡素な造りですが、WebGLを重ねるなど作り込んでいけば、openFrameworks以上のものは、できそうですね。音楽の再生もできるので、DJ側もElectronで一応できちゃったり(恐ろしいな・・・)、live coding環境もつくれそうですね。

おわりに

どうでしょうか?javascriptの恐ろしさが垣間みえたような気がします。
DOM構造をいじれるのは、VJアプリとしても大きく違うものですし、最近のjavascript環境は、Arduinoを使えたり、ドローンやPepperの操作ができたり、充実しているので、組み合わせ次第でもっと変態的でおもしろいものが作れそうですね。

SYPHONが気になりますが、HDMIキャプチャーでも使えばなんとかなるでしょう。

参考サイト

node.jsインストール

http://www.atmarkit.co.jp/ait/articles/1501/09/news040.html

Electron導入部分

https://ics.media/entry/7298
http://phiary.me/electron-jquery-script-tag-load/

ブラウザ作成 IPC通信

http://qiita.com/mamo/items/084039c3e6d703b7b45f
http://qiita.com/fumizp/items/e498b6b7bb20c339c8cf

WebAudio API

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins