勉強不足で至らんブログ

勉強不足ですが色々と書いていきます。

箱庭の音

音を基軸としたコンテンツを作ってみたかった

たまにMVとかを自動化できたら面白そうかなとか思っていたので形にするならどうなるんだろう?と思って作りました

youtu.be

音によって色々なパラメーターが変わるコンテンツです

※音が出ます

mizotake.github.io

音に合わせてカメラが揺れたり、傘の移動速度が変わったりします。

さらに音を好きな音楽に変えることができてwavファイルのドラッグ&ドロップで放り込めば切り替わって、切り替えた音を取得して動きが変わるコンテンツになります

音によって空間の動きが変わるけど一部しか観れないので箱庭っぽいなぁということで「箱庭の音」というタイトルにしています(多少キャッチーなタイトルがよかったかも)

影しか写らない横断歩道は自分の世界観なだけなので特に理由がないです

開発環境など

github.com

コアとなる部分はUnityで作っていてドラッグ処理などをVue.jsで繋げています

有料Assetsも使ってるのでリポジトリを公開しているもののUnityプロジェクトは誰でも触れるものにはなってないです。。。

Vue.jsから11MBのファイルをUnityに渡すためにbase64するとメモリが足りなくなったりと意外と気を遣うところが出てきたりしました。。。

あとはVue.jsをまともに触るのは初めてだったので作りがかなりイケてないんだろうなと思ってますが作りきることのが大事だと思ってるのでとりあえず作りました(cssが相対的でなかったりビルド後のファイルパスを相対的に治したり…設定があるんだろうけど動かしたかった)

wavファイルを動的ロードする際にUnityWavというのを使ったのですがバイナリの読み取りに柔軟性がなくforkして修正するなどしてました → forkしたリポジトリ

そしてAudioの数値取得は

AudioSource-GetSpectrumData - Unity スクリプトリファレンス

で通常はできるのですがWebGLだと動かないため

assetstore.unity.com

を使って実装しました、、、動いてよかった

ホントはSoundCloudapiを叩いて自由度もあげたかったけどノウハウなさすぎたので一旦断念中

実は昔のプロジェクトをベースとしている

UnityをVueで動かすノウハウ Unityで吐いたWebGLをPWAで動かしてみた - Qiita

遊んでただけの音からパラメーター取るロジックや

見た目に凝ろうとして途中断念したプロジェクトを掛け合わせて作りました

そのため二週間くらいで作りきれたので蓄積大事だなと思っています

さいごに

今後「箱庭」の種類を増やして音を分析して自動的に見た目を変えたりしていきたいと思っています

そのために

github.com

を使ってもっと取得できるパラメーターを増やして遊べるとよさそうだなぁと思ったり

動画とはちょっと違うところがありますが動画としてみれるようにpinp(ピクチャーインピクチャ)機能を使う表示も視野にいれてみたい…