Screenshots
Overview
概要
3D空間のステージ上に演奏者キャラクターと指揮者を配置し、各自に楽器と担当パートを割り当てて合奏させるWeb音楽アプリです。内蔵のクラシック曲を選ぶほか、MIDI／MusicXMLを読み込んで自動編曲し、音色やエフェクトを調整できます。WebXRに対応し、VRで指揮台に立って鑑賞することも可能です。
How to use
遊び方・使い方
曲を内蔵リスト（歓喜の歌・きらきら星など）から選ぶか、MIDI／MusicXMLファイルを読み込みます。演奏者を選択して楽器・担当トラックを割り当て、人数を増減。各演奏者の音量・ディストーション・リバーブ・音色やソロ／ミュートを調整して音作りします。再生コントロールでテンポを変えながら合奏を再生でき、音場プリセットやBloomなどの演出を切り替え可能。編成と曲はURLハッシュで共有リンク化でき、対応端末ではVRでも鑑賞できます。
Tech stack
技術スタック
ReactTypeScriptViteThree.jsR3FTone.jsZustandWebXR
React Three Fiber＋Three.jsの3D舞台に、Tone.jsの音源（Sampler＋合成音）を組み合わせ。MIDI／MusicXMLの自動編曲やWebXR（VR鑑賞）に対応し、状態管理はZustand。楽器サンプルmp3を同梱しています。
Highlights
工夫した点
- MIDI／MusicXMLを読み込んで楽器編成へ自動編曲し、空の譜面でもすぐ合奏に乗せられる
- 母音・子音を組み合わせた歌声合成を用意し、楽器だけでなくボーカルパートも扱える
- 編成と曲をURLハッシュへ直列化する共有機能と、WebXRによるVR鑑賞に対応
To improve
改善したい点
- 同梱mp3サンプルは楽器ごとに数音のみで、補間に頼るため音域端の再現性に課題
- パネルが多くUI要素が密集しており、初見では操作の導線が分かりにくい
What's next
今後の展望
- 歌詞入力など歌声合成のさらなる拡充
- サンプル音源の拡充とモバイル／低スペック端末向けの描画負荷最適化