Day 25。他の日のプロジェクトを作りながら、自分が実際に使いたいアプリを作った。
プロンプト#
アイデアはシンプルだった：環境音を重ねて、仕事中、リラックス中、睡眠用のバックグラウンド雰囲気を作れるアンビエントサウンドミキサー。YouTubeの「カフェの雰囲気」動画みたいなものだけど、インタラクティブでカスタマイズ可能なやつ。
面白い制約は、すべてのオーディオをWeb Audio APIを使ってプロシージャルに生成したかったこと。サンプルファイルなし、読み込むオーディオアセットなし。すべてブラウザ内で合成する。
どうやって作ったか#
Watchfireがこれを10個のタスクに分解してくれた。最初のプランではHowler.jsと事前録音したサウンドファイルを使う予定だったけど、早い段階でWeb Audio APIによるプロシージャル生成に方針転換した。つまり、雨から暖炉のパチパチ音まで、聞こえるすべての音がリアルタイムで数学的に生成されている。MP3なし、ダウンロードなし、ローディング画面なし。
できたもの#
3カテゴリにわたる12の音。 Nature、Urban、Cozy。それぞれ独自のカードとボリュームスライダーがあり、好きなように組み合わせられる。Natureカテゴリには雨、森、海の波などがある。Urbanにはカフェの会話やキーボードのタイピング音。Cozyには暖炉のパチパチ音。
マスターコントロールはすっきりしている。 上部にAmbience、Music、全体ボリュームの3つのスライダーと、スリープモード用のタイマーボタン。グラスモーフィズムのUIは暗い背景に映えて本当にいい感じ。
プリセットですぐに使える。 4つのビルトインプリセットがある：Rainy Coffee Shop、Forest Cabin、Late Night Coding、Ocean Breeze。ワンクリックでキュレーションされたミックスが手に入る。例えばForest Cabinは、Forest、Wind、Birds、Fireplaceを異なるボリュームレベルで有効にする。localStorageに自分のカスタムプリセットも保存できる。
すべての音がプロシージャル生成。 雨はフィルターで整形されたホワイトノイズ。風は遅いモジュレーションの低周波オシレーター。鳥はランダムなタイミングの短いサイン波チャープ。暖炉はクラックルバーストを伴うフィルター処理されたノイズ。どれも完璧な音ではないけど、認識できるレベルで、うまくブレンドされるから脳が隙間を埋めてくれる。
Lo-Fiビートジェネレーターがある。 これは元のプランにはなかったけど、ボーナスとして登場した。ムードプリセット（Chill、Happy、Sad、Dreamy）と、Drums、Bass、Keys、Melody、Vinylクラックルの個別コントロールがある。74 BPMで動作し、バックグラウンドで流したくなるものを実際に生成する。ビートはアンビエントサウンドの上に重なるので、雨＋Lo-Fiビート＋暖炉を同時に流せる。
背景がミックスに合わせて変化する。 ダイナミックなグラデーション背景が、アクティブなサウンドに基づいて変わる。Nature系のミックスは緑や青に寄り、Urbanは暖かい色味に。微妙だけど、全体が生き生きとした感じになる。
URLで共有。 自分のミックスをURLをコピーして誰かと共有できる。どのサウンドがアクティブでボリュームレベルがどうなっているかをエンコードするので、リンクを開いた人はまったく同じセットアップが得られる。
キーボードショートカットが充実。 スペースですべて一時停止、数字キー1-9と0で個別サウンドの切り替え、Escapeですべて停止。スリープタイマーは選択した時間（15、30、60、90分）にわたって緩やかなフェードアウトを行う。
バグレポート#
プロシージャルオーディオのアプローチだったので、ほとんどのバグはオーディオ関連だった：
- 一部のサウンドがオン・オフ切り替え時にクリック音やポップ音が出た（適切なゲインランピングが必要だった）
- Lo-Fiビートジェネレーターのタイミングが長時間セッションでわずかにドリフトした
- フィルターを調整する前に、フルボリュームで一部の合成音がきつすぎた
大きな問題はなし。Web Audio APIはパワフルだけど、オーディオコンテキストのライフサイクルを適切に扱わないと容赦ない。
試してみて#
ヘッドホンで体験するのがベスト。「Late Night Coding」プリセットを試して、Lo-Fi Beatsをオンにしてみて。
Day 25の感想#
YouTubeの動画やSpotifyのプレイリストを探し回るんじゃなくて、自分だけのアンビエント背景をミックスするのは、なんか満足感がある。しかもすべてプロシージャル生成だから、ループも繰り返しもない。雨はただ降り続ける、常に少しずつ違う形で。
Web Audio APIは過小評価されてる。オシレーター、ノイズジェネレーター、フィルターだけでこんなに多くの異なるサウンドを合成できるとは知らなかった。スタジオ品質ではないけど、バックグラウンドアンビエンスとしては驚くほどうまくいく。オーディオファイルゼロなので、アプリ全体が瞬時にロードされ、オフラインでも動作する。
残り5日。
これは30 Days of Vibe Codingの25日目です。AI支援コーディングを使って30日間で30個のプロジェクトを出荷する様子をフォローしてね。
