Ambient Music Mixer
概要
8つのレイヤーをリアルタイムにミックスして、自分だけの環境音楽（アンビエント）を作れる Web アプリです。
音楽の知識がなくても、聴きながら・触りながら環境音楽を楽しめます。
担当・役割
個人開発（企画・設計・実装）
使い方
- 画面をクリックして音声を開始する
- 8つのレイヤーそれぞれのスライダーで音量・エフェクトを調整する
- 上部のプリセットボタンでミックス全体を切り替える（最後に選んだプリセットはブラウザに保存されます）
エフェクト
| 名前 | 説明 |
|------|------|
| Volume | 音量を操作します |
| Filter | 高音を抑えます |
| Tremolo | 音量を周期的に変化させます |
| Vibrato | 音程を周期的に変化させます |
| Panner | 左右ステレオを周期的に変化させます |
プリセット
| 名前 | 説明 |
|------|------|
| Reset | すべてのレイヤーを初期状態に戻す |
| Soft Ambient | 穏やかで柔らかいミックス |
| Deep Focus | 集中向けの落ち着いた低域中心ミックス |
| Dreamscape | 浮遊感のある広がりのあるミックス |
| Minimal | 控えめな音量設定のミックス |
環境音楽について
またの名をアンビエント音楽と言います。空間に添える形で提供され、微妙な音の変化に耳を傾けたり、ただ空間に漂う「音」として楽しむことを意識して作られています。ヒーリングや瞑想などにも使われます。
技術スタック
| 用途 | 技術 |
|------|------|
| フロントエンド | Nuxt.js 2 |
| 音声処理 | Tone.js |
| 背景アニメーション | CreateJS |
| ホスティング | Firebase Hosting |
| 音源配信 | Firebase Hosting（static/sounds/c/） |
工夫した点
Tone.js を用いて、8 レイヤー × 5 エフェクトのループ再生とリアルタイム調整をブラウザ上で実現しました。プリセット切り替えと localStorage による状態保存、CreateJS による背景アニメーションも組み合わせています。
成果・学び
Web Audio API / Tone.js を活用したインタラクティブな音楽体験の設計を実践しました。GitHub Actions による Firebase Hosting への自動デプロイも構築しています。
今後の構想
- アプリ上で音源を作成できる環境
- 作成した音源の投稿・シェア
- 誰もが環境音楽を作成・ミックスできるプラットフォーム
リンク
GitHub / Demo はページ上部リンクを参照してください。