前回のシステムを公開して使用した方から、カメラ画面が小さくて見づらいと言われた。システムを実装するのに夢中になり肝心な体験の部分が疎かになってしまっていた。そのため、UI部分の見直しデザインを再度行った。
デモバージョン3は以下のURLで確認可能である。PCまたはスマートフォンに対応
https://zumisio.github.io/real-time-bgm-project-2024-9.5.github.io/
このシステムの動作を順を追って説明する。
1.カメラ制御
-📸 カメラアイコンをタップ。初回起動時は少し時間がかかる。
-🔄 回転矢印アイコンをタップで前面/背面カメラの切り替え。
2.物体検出
-カメラ起動後、物体検出モデルを使用して映像内の物体を検出する。
– 検出された物体は画面上に枠線と検出したオブジェクト名で表示される。
3. ドラム音生成
– 物体が検出されるたびに、ランダムにキック、スネア、ハイハット、タムの音が生成される。
– 各ドラム音は、Tone.jsライブラリを使用したデジタルドラムサウンドを引き続き採用した。
4. ドラムパラメーター調整
– 各ドラム音(Kick、Snare、Hi-hat、Tom)には🐰と🐢ノブがあり、ドラムのスピードをを調整可能である。前回まで搭載されていた音色の調節機能は削除した。
前回までは、Detection Logという検出結果をリアルタイムに表示する機能があったが、不必要と判断し削除した。
ここまでやってきたが、まだデモバージョン感は否めない。当初想像してたシステムは、2回目の記事に書いたが、「脳内リズムマシン」のようなシステムを制作する事である。現状のシステムでは全然物足りない。脳内では、もっと豊かな音楽を鳴らしてる。この状況を改善しようと思うと、webだけで実装するのはあまりにも難しいと考える。その為、iOS,visionOSを始めとするApple エコシステムで作動するアプリケーションに移行する。いつApp公開になるかわからないが、絶賛鋭意製作中。