React使いがJUCEv8+WebViewではじめるオーディオプラグイン開発
こんにちは。音楽ディレクター・プロデューサーの村上純といいます。
今回、「MixCompare」という新しいオーディオプラグインをリリースしました。AAX/AU/VST3対応。
非常にニッチなのですが、DAWのマスタートラックに刺して、制作中の楽曲と、他のオーディオファイルを切り替えながら再生して比較する、というただそれだけのプラグインです。
でも、テストしてもらったプロの作家さんやレコーディングエンジニアのお友達にはまずまず好評です。
無料公開にしましたので、よろしければ使ってみてね。
ダウンロードは↓から
JUCE v8では、ついにWebViewフロントエンドを正式サポートということで、
React勉強中のわたしはかなり手を出しやすくなったので、チャレンジしてみました。
正直C++はど素人なので、AIなしでは開発不可能ですが、なんとか形にすることができました。
一応備忘録として、初学者がやった手順をダイジェストでお届けします。
お恥ずかしながら、OSSとしてソースコードも公開します。↓
1.プロジェクトのひな形を作る
公式で紹介されていた、こちらのCMake+WebViewのリポジトリを参考にして始めました。 また、公式のサンプルフォルダにもWebViewのサンプルがあります。
JUCEには、CMakeでビルドする方法と、Projucerという各プラットフォーム向けにIDEのプロジェクトファイルを自動生成するGUIツールを使って開発する方法と、２通りの方法があります。
チュートリアルや、ネット上の記事だと、ほとんどProjucerを使うものが多いのですが、
CLI全盛の今どきビルドツールに慣れ切ってしまった自分は、今更GUIでポチポチするのはいまいち気乗りせず、、、。
最初の学習曲線が急とも言われる、CMakeで開発を始めることにしました。
結果、慣れれば、CMakeList.txtの記法もシンプルなのでそんなに苦ではありませんでした。
正直Node.jsでちょっと古いライブラリ使ったり、お行儀の悪いツールをあれこれ組み合わせてビルド環境を構築するよりは、サブモジュール一発で環境が整う今回の方がはるかに簡単でした。
2．JUCEをクローンする
何はともあれ、リポジトリをクローンします。サブモジュール方式で使いました
git submodule add https://github.com/juce-framework/JUCE.git JUCE
3．コードを書く！
設定さえ終えれば、あとはコードを書くだけです。
WebViewとバックエンドC++の連携は上記のサンプルを参考にしてください。
Reactフロント脳の自分としては、状態管理は単方向データフローで構築したくなるものですが、
どうもこれはJUCE的には相性悪いようで、上記２つの例もそうなのですが、
結果的にほぼ双方向バインディング的な実装になっています。
もともC++でゴリゴリUIを書くためのフレームワークでもあるので、そうなるのかもしれませんが、
ValueTreeという状態管理システムを管理するAudioProcessorValueTreeStateという便利なクラスがありまして、とりあえずここにバインドしておけば、UI同期の悩みも一切肩代わりしてくれて、
DAWホストとのパラメータ連携＆オートメーション、xmlでの永続化の面倒まで見てくれます。
最初全部自前で同期する仕組みを書いてたんですけど、AI先生がJUCE＋WebViewの実装プラクティスをほとんど知らないっぽいこともあって、スパゲティコードを量産してました。
双方向バインディングに切り替えてからは一気にバグも減って安定して開発を行うことができました。
バックエンドと言ってもあくまでローカルなので、パフォーマンス的にも問題は全く問題ないです。
4.WebViewのUI開発はやっぱり快適だが落とし穴もある
やはり慣れてるReactとTypeScript、MUIなどのライブラリをふんだんに使った開発体験はよく、非常に快適です。
一番ハマったのは、キーボードショートカットです。
オーディオプラグインは、ほとんどの製品は、キーボードショートカットは無効にしてあって、プラグインをマウスで操作していても、キーボードショートカットは裏側のDAWに対して効く、という実装のものが大半です。
しかし、JUCE＋WebView環境だと、WebViewを操作していると、C++ネイティブとは独立して動いているOSのWebViewがフォーカスをインターセプトしてしまうので、そのままだとキーボードショートカットがプラグインのWebViewだけに効き、DAWの操作ができません。
この問題はJUCEフォーラムでも話題になっていて、結果的にWebViewで拾ったキーボードショートカットを、C++ウィンドウ側に転送するという涙のワークアラウンドで対応しています。
Windows版のFruittyLoopsだけウィンドウハンドルの取得を特別扱いしないといけないとか、
ちょっといろいろ苦労したので、興味のある方はわたしのコードを覗いてみてください。
とりあえずプラグインとしては第一作目ということで、これから色んなミュージシャンやクリエイターの皆さんと色々作っていく予定です。夢が広がりんぐ。
ではでは。
Discussion