HushLoom は、ホワイトノイズと雨・波・焚火・風・カフェの環境音を鳴らすジェネレーターです。録音音源を 1 つも持っていません。すべて Web Audio でその場で合成しています。
#🎯 録音を持たないという制約から始めた
環境音アプリは普通、録音した音声ファイルを再生します。でもそれだと、
- ファイルが重い(数分のループでも数 MB)
- ループの継ぎ目が分かる
- 権利の確認が要る
という問題があります。合成なら、ファイルサイズはゼロで、継ぎ目もなく、権利も発生しません。 代わりに「それらしい音を作る」という課題が残ります。
#🎚️ 3 種類のノイズを作り分ける
土台になるのがノイズです。3 種類を実装しました。
ホワイトノイズは全周波数が均等。一番単純です。
data[i] = Math.random() * 2 - 1ピンクノイズは 1/f 特性(低音ほど強い)を持ちます。人が「うるさくない」と感じるのはこちらで、雨や滝の音に近い。実装は Paul Kellet の 7 タップ IIR フィルタを使いました。
b0 = 0.99886 * b0 + w * 0.0555179
b1 = 0.99332 * b1 + w * 0.0750759
b2 = 0.969 * b2 + w * 0.153852
b3 = 0.8665 * b3 + w * 0.3104856
b4 = 0.55 * b4 + w * 0.5329522
b5 = -0.7616 * b5 - w * 0.016898
const pink = b0 + b1 + b2 + b3 + b4 + b5 + b6 + w * 0.5362
b6 = w * 0.115926時定数の違う 7 本のローパスを並列に足すという構造です。減衰係数が 0.99886 から 0.55 まで散らばっていて、それぞれが違う帯域を担当します。係数は経験的に決められた値なので、写して使っています。
ブラウンノイズは白ノイズを積分したもので、さらに低音寄り。
last = (last + w) * 0.998* 0.998 のわずかなリークが重要でした。純粋に積分するとランダムウォークになり、値がどんどん一方向に流れて(DC オフセット)、そのうち振り切れます。0.998 を掛けて少しずつ 0 に戻すことで、中心に留まります。
この一手を入れないと、数十秒で音が消えるか歪みます。
#🌧️ フィルタで「雨」や「波」にする
ノイズができたら、あとはフィルタと変調です。
| 音 | 作り方 |
|---|---|
| 雨 | ピンクノイズ + ハイパスで高域を残す |
| 波 | ブラウンノイズ + LFO でゆっくり音量を揺らす |
| 焚火 | ブラウンノイズ + 不規則な短いバースト(はぜる音) |
| 風 | ピンクノイズ + バンドパスの中心周波数を揺らす |
| カフェ | ピンクノイズ + 中域を強調 |
波のうねりは LFO(低周波発振器)で音量を変調するだけです。周期 8 秒くらいでゆっくり揺らすと、寄せては返す感じになります。
風は帯域を揺らします。バンドパスの中心周波数を上下させると、「ヒュー」という抜ける感じが出ます。音量ではなく周波数を揺らすのがポイントで、音量だけだとただの脈動になります。
#🎛️ 5 つのつまみ
主音量・Low-cut・High-cut・うねりの振幅・うねりの速さの 5 つを触れるようにしました。
これはプリセットを増やすより、つまみで自分の好みに寄せてもらう判断です。集中したい人は高域を落とし、眠りたい人はうねりを遅くする。用途が人によって違うので、正解を用意するより調整させるほうが合っていました。
#⏲️ スリープタイマー
15/30/60/90/120 分で自動停止します。実装は単純ですが、フェードアウトを入れるのが効きました。突然無音になると目が覚めます。最後の数十秒でゲインを落としていきます。
#😓 苦労したところ
バッファの長さ。 8 秒ぶんのノイズを生成してループさせています。短いと繰り返しに気づかれ、長いとメモリと生成時間を食う。ノイズは元々ランダムなので、8 秒あればループしていると分かりません。実際に耳で確かめて決めました。
モバイルの自動再生制限。 ブラウザはユーザー操作なしに音を出せません。AudioContext を最初のクリックで作り、それまでは待つ構成にしています。
VU メーターを付ける。 音だけだと「鳴っているのか」が分かりにくく、特に低音中心の設定では小さいスピーカーで聞こえないことがあります。アナログ風の VU メーターをリアルタイム描画して、目でも鳴っていることが分かるようにしました。
「無限に鳴らす」ときのメモリ。 BufferSource をループ再生する形にしたので、鳴らし続けてもメモリは増えません。毎回新しいバッファを作る実装にしていたら、長時間再生で落ちていたはずです。
#🔭 今後の拡張
- 複数ステーションの同時再生とミックス(雨 + 焚火 など)
- バイノーラルビート
- 設定の保存と共有
- 波の周期を「潮の満ち引き」のように長周期で変える
#💡 このサービスから言えること
「録音を持たない」という制約が、そのまま強みになりました。 ファイルがないので一瞬で始まり、継ぎ目がなく、無限に鳴り続けます。制約から入ると設計が決まる、という典型でした。
そして音の合成では、フィルタの係数やリーク係数のような「小さな定数」が音の成否を決めます。* 0.998 を書き忘れると音が壊れる。数式としては些細ですが、そこが実装の本体でした。
[ ./next_action ]
読んだら、 HushLoom を実際に動かす。
この開発ログは HushLoom をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。