前回の記事でリアルタイムBGMシステムのデモバージョン1を公開した。デモバージョン1と言いつつ実際は、動作チェック程度しか出来なかった。そこからユーザーインターフェース、デザインの改善とサウンドシステムの拡大を行ったバージョン2を開発した。まだまだリリースできる段階ではないが、前回より遊べる状況になってきた。
デモバージョン2は以下のURLで確認可能である。PCまたはスマートフォンに対応
https://zumisio.github.io/real-time-bgm-project-2024-9.github.io/
また筆者が行った簡単なデモ動画もある。
このシステムの動作を順を追って説明する
1. カメラ制御
– 「Start Camera」ボタンでカメラを起動。
– 「Stop」ボタンでカメラを停止。
– 「Switching」ボタンで前面/背面カメラの切り替え。
2. 物体検出
– カメラ起動後、物体検出モデルを使用して映像内の物体を検出する。
– 検出された物体は画面上に枠線と検出したオブジェクト名、確率(%)で表示される。
3. ドラム音生成
– 物体が検出されるたびに、順番にキック、スネア、ハイハット、タムの音が生成される。
– 各ドラム音は、Tone.jsライブラリを使用したデジタルドラムサウンドを採用した。
4. 音量調整
– 画面下部のスライダーで全体の音量を-10dBから調整可能である。
5. ドラムパラメーター調整
– 各ドラム音（Kick、Snare、Hi-hat、Tom）にはノブがあり、音色を調整可能である。
– 例：キックの音程、スネアのノイズタイプ、ハイハットの周波数などを変更可能である。
6. 検出結果の表示
– 「Detection Log」セクションには検出結果がリアルタイムに表示される。
– 画面上部には検出された物体と確率(%)がリアルタイムで表示される。
このシステムは、カメラ映像からリアルタイムで物体を検出し、その結果に基づいてドラム音を自動生成するシステムである。文章だけでは、わかりづらいと思うので是非触ってみてほしい。
今後の課題
1. 更なるユーザーインターフェースデザイン、サウンドデザインの改善
2. 物体検出精度の向上
前回に引き続きWebベースアプリケーションの開発を通じて、PC、スマートフォンでの実行可能性を確認した。今後も上記の課題に取り組み、より完成度の高いアプリケーションの開発を目指す。