Baby Melody Bloom

English README

Baby Melody Bloom（ベビメロ）は、音をもっと愛おしく感じてもらうための小さな光の庭です。 ささやき声も鼻歌も赤ちゃんの「あーうー」も、すべてが色と光に変わってちいさなステージで踊り出します。 作っているとき、私自身が何度も癒やされたので、その感覚を丸ごとシェアしたいと思って公開しました。

このプロジェクトに込めた気持ち

• 「音程がずれても大丈夫。色が可愛ければそれで最高！」という安心感を届けたい
• 夜泣きで目が覚めたときでも、柔らかな光でふわっと気分転換できる場所にしたい
• 赤ちゃんと大人が同じ画面を見ながら笑い合える、そんなコミュニケーションの種になってほしい

遊び方ガイド

1. Chrome／Edge／Firefox／Safari などのブラウザで https://telumo.github.io/BabyMelodyBloom/ にアクセスするか、ローカルで index.html を開きます。
2. マイクアクセスの許可を求められたら「許可」をクリック。ここで魔法の扉が開きます。
3. 画面下の「Start Visualizer」ボタンを押すと、Baby Melody Bloom が目を覚まします。
4. 声を出したり、口笛を吹いたり、お気に入りの音楽を流したりしてみてください。
5. 音の高さで色が変わり、音の強さで光がはじけます。ときどきハートや星がこっそり顔を出すかも。

もっと楽しむアイデア

• 部屋の照明を落として全画面表示にすると、部屋全体が光のステージに早変わり。
• 赤ちゃんと「あー」「いー」「うー」と母音を変えながら遊ぶと、色の違いが分かりやすくて盛り上がります。
• 録音アプリで自分だけの「癒やしボイス」を流しつつ眺めると、日々のリセットタイムにぴったり。
• マウスや指で画面をなでると、粒がふわっと反応します。お気に入りのスパークルを探してみてください。

中身のメモ

• コードはすべて index.html にまとまったワンファイル構成です。気になったら自由に分割・改造してください。
• Web Audio API でピッチ推定と音量チェックをし、requestAnimationFrame で描画しています。
• パーティクル数や色の計算を変えるだけでも全く違う表情になるので、お好みの Baby を育ててみてください。

これからやってみたいこと

• 音階ごとにかわいいキャラクターを出して、Baby Melody Bloom 図鑑を作る
• スマホ片手でも操作しやすい HUD デザインに磨き直す
• みんなの遊び方やフォーク作品を集めて「みんなのベビメロ博覧会」を開催する

「こんな演出が好きだった」「ここを直したよ！」など、フィードバックやスクリーンショットをシェアしてもらえるとうれしいです。 Baby Melody Bloom が、あなたの日常に小さな楽しみを咲かせますように。

ライセンス

本プロジェクトは MIT License の下で公開しています。自由に遊んで、自由に広げてください。