ブラウザで効果音を作る - なまずSE工房のパラメータ設計

効果音は「録音」ではなく「時間の設計」

画像を拡大する（別タブ）

なまずSE工房は、保存済みの爆発音やジャンプ音を再生しているわけではありません。波形を作り、その周期を動かし、短い音量カーブを掛け、FilterやPhaserを通して、その場でモノラルの音声データを合成します。したがって、同じ「爆発」ボタンでもクリックごとに値が選び直され、少しずつ違う音になります。

この発想の源流は、Tomas Petterssonが2007年のLudum Dare向けに作ったsfxrです。作者自身の説明では、48時間のゲーム制作中に、用途別ボタンやRandomizeを押し、気に入ればWAVへ出すことが目的でした。その後Eric FredricksenがHTML5へ移植したjsfxrが生まれました。なまずSE工房は、このsfxr／jsfxr系の考え方を参考にした独自のTypeScript実装です。公開ライブラリをそのまま包んだ画面ではないため、以下の数式と挙動は現在のSE工房の実装を基準にします。

この方式が得意なのは、動作と同時に鳴る短い音です。映像上の出来事と発音の頭を揃え、100〜600msほどの中へ明確な軌跡を置けます。一方、実在する金属、部屋の残響、人の声を精密に再現する方式ではありません。写実的な録音の代替というより、出来事の意味を少ない要素で伝える音の記号を作る道具です。

Pitch、Envelope、Vibrato、Filter、Noise

画像を拡大する（別タブ）

画像を拡大する（別タブ）

画面には多くのつまみがありますが、信号の流れは整理できます。まずSquare、Saw、Sine、Noiseのどれかで素材を作る。Frequency群で周期を動かす。Envelopeで瞬間ごとの音量を決める。Low-pass、High-pass、Phaserで倍音の並びを変え、最後にVolumeを掛けて再生・書き出しを行います。

大事なのは、各つまみを「音色」「高さ」「長さ」と静止した属性で覚えないことです。効果音では、最初の20msと最後の200msが同じ音である必要はありません。むしろ途中で別の状態へ移るから動作に聞こえる。SE工房は一音を鳴らすシンセというより、短い変化を描く装置として扱うと理解しやすくなります。

波形が「素材の輪郭」を決める

同じBase FreqとEnvelopeでも、波形を替えると物体の材質まで変わったように聞こえます。これは波形が、基音だけでなく整数倍の周波数成分である倍音をどの比率で含むかを変えるためです。

SquareのDutyは一般的な「音量」ではありません。SE工房では内部の正側の幅を0.5 − Duty × 0.5で決めます。Duty 0なら50%の対称な矩形波、値を上げるほど正側が細いパルスになります。細いパルスは広い帯域へ倍音が増え、痩せたブザー、鋭い機械音へ寄ります。Duty Sweepは、その幅を再生中に動かします。

波形比較では音量差に注意してください。SE工房のSquareは振幅が±0.5、SawとSineはおおむね±1から始まるため、同じVolumeでも単純な大きさは揃いません。「大きいほうが良い音」に聞こえる錯覚を避けるには、Volumeを少し合わせてから材質だけを比べます。

周波数スイープ：音高ではなく軌跡を作る

Base FreqはHzの直接入力ではなく、0〜1の正規化値です。SE工房はまず周期を100 / (Base Freq² + 0.001)として計算し、1出力サンプル内を8回に分けて波形を進めます。44.1kHz時の開始周波数は、FilterやVibratoを無視した概算で次の式になります。

したがってBase 0.3は約321Hz、0.5は約886Hz、0.7は約1732Hz、0.9は約2861Hzです。つまみを0.2ずつ動かしてもHzは等間隔に増えません。高い領域ほど、わずかな移動で印象が大きく変わります。Noiseには安定した基音がありませんが、この周期が乱数列を更新する速さを決めるため、Base Freqはノイズの粒立ちや色にも作用します。

Slideの符号が、動作の方向を変える

再生中は周期へ1 − Slide³ × 0.01を繰り返し掛けます。Slideが正なら周期が短くなり、音高は上昇します。負なら周期が長くなり、音高は下降します。値を3乗しているため、0付近は繊細で、端へ近づくほど急激です。+0.1と+0.7は単なる7倍の速さではありません。

Delta SlideはSlideそのものへ足す値ではなく、周期へ掛ける変化率を少しずつ曲げます。正方向は軌跡をより上昇側へ、負方向はより下降側へ押します。開始時のSlideとの組み合わせで、ゆっくり上がって後半に加速する音、最初に落ちてからさらに崩れる音を作れます。

Min Freqは「そこで鳴り続ける値」ではない

Min Freqは主に下降スイープの終了条件です。音高が設定した下限へ達すると、SE工房の現行実装はその高さで保持せず、合成を終了します。レーザーの尻尾をどこで切るか、落下音を低域へ引きずり過ぎないかを決める安全柵です。0なら、この下限による早期終了は行いません。

Envelope：音量の形が、重さと距離を作る

振幅包絡は、音が「いつ聞こえるか」を決めます。SE工房はAttack、Sustain、Decayの3段階を持ち、Sustainの頭へPunchを加えます。各段の長さは線形ではなく、現行実装では値² × 100000ステップです。1ステップは1/44100秒なので、1段の長さは概算で2.268 × 値² 秒となります。

Attack 0は、発音を遅らせず直ちにSustainへ入ります。ボタン押下、着地、命中のように映像との同期が重要な音では基本形です。Attackを増やすと因果の頭がぼやけ、吸い込み、充電、接近、魔法の発動前といった「まだ出来事が完了していない」印象へ変わります。

Sustainは単なる一定音量の保持ではありません。段の中で音量は下がりながら1へ近づきます。Punchを上げるとSustain開始時だけ1 + 2 × Punch相当まで持ち上がり、その後1へ戻ります。だからPunchは全体を大きくするVolumeとは違い、コインの手応え、爆発の初撃、硬い命中の「頭」だけを強くできます。

Decayは1から0へ消える尾です。同じ総時間でも、Sustainを長くしてDecayを短くすれば途中まで存在感があり急に切れ、Sustainを短くしてDecayを長くすれば初撃からすぐ遠ざかります。重い音を作るときは長さだけでなく、どこへ時間を配分したかを聞いてください。

Noise・Filter・Resonance：ざらつきを材質へ変える

Noiseを選んだだけでは「爆発」にはなりません。明るいNoiseは砂、電気、破砕、スプレーにも聞こえます。爆発らしさを作るには、時間の頭へPunchを置き、Low-passで高域を抑え、必要ならカット位置を動かして、明るい破裂から暗い尾へ変化させます。

Cutoff値はHzではありません。LPは値を3乗、HPは2乗した係数を内部Filterへ使います。市販EQの「2kHz」と直接対応させず、0付近の細かい変化と1付近の開放感を耳で比較するのが正確です。Resonanceも一般的なQ値表示ではなく、内部の減衰量を変える正規化パラメータです。

PhaserはFilterとは別物です。少し遅らせた自分自身を足し、周波数ごとに強め合う場所と打ち消し合う場所を作ります。Offsetで遅延量、Sweepでその遅延の動きを決めます。レーザーへ少量なら金属的な空気、爆発へ加えれば筒や洞窟のような空洞感が出ます。深く掛けると主役の輪郭が崩れるため、最後に足す味付けとして扱うのが安全です。

Vibrato・Arpeggio・Retrigger：三つの「音高が動く」を分ける

どれも音高変化を作りますが、時間構造が違います。Vibratoは連続的な往復、Arpeggioは途中で一度だけ起きる段差、Retriggerは周波数軌跡を一定間隔で開始位置へ戻す反復です。この違いを混ぜると、狙いがぼやけます。

VibratoのDepthは周期の揺れ幅、Speedは揺れる速さです。短いHitへ遅いVibratoを入れても、1周期を聞き終える前に音が消えるため効果は分かりにくい。まずEnvelopeを長くして揺れを確認し、その後必要な長さへ戻すと調整しやすくなります。

ArpeggioのModが正なら周期が短くなり、音高は上側へ跳びます。負なら低い側へ大きく跳べます。Speedはイベント時刻を決め、高いほど早い時点へ寄ります。ただし現行実装ではSpeedがちょうど1のときArpeggioが無効になる境界挙動があります。最大へ固定せず、0.6〜0.9付近から探すのが実用的です。

Retriggerは音そのものを重ね直す機能ではありません。Envelopeは進み続けたまま、Base FreqとSlideの進行だけをリセットします。そのため、上昇スイープを短い間隔で巻き戻すと、全体としては消えながら階段状に何度も上がる音になります。

決定音、被弾音、ジャンプ音の設定例

以下は唯一の正解ではなく、役割が伝わる「骨格」です。最初にリセットし、表にない項目は既定値のまま入力してください。プリセットはクリックごとに乱数を使うため、比較実験では手入力した値を保存してから次へ進みます。

ジャンプ：上昇だけでなく「離陸の速さ」を作る

上昇Slideだけでは、長いサイレンにもなります。Attack 0で操作と音の頭を合わせ、SustainとDecayを合わせて約0.16秒へ収めることで、ひとつの動作として読めます。重いキャラクターならBaseを下げるだけでなくSustainを少し伸ばし、Slideを弱くします。軽いキャラクターならBaseを上げ、短く急に上がる形へ寄せます。

被弾：音高より、最初の数十msを設計する

被弾は出来事の頭が命です。Attackを伸ばすと命中位置が遅れて感じられます。短いSustainへ少量のPunchを置き、Noiseで非周期的な破砕を加えます。HPを上げれば小さな装甲や軽いダメージ、LPを下げて尾を伸ばせば大きな衝突へ寄ります。Squareへ替えれば、物理衝突よりレトロゲームのダメージ記号が前へ出ます。

レーザー：下降音だから射撃になるわけではない

下降Slideは落下や失敗にも使われます。レーザーにするには、高い開始点、短い時間、倍音の多い波形、Min Freqによる明確な終端を組み合わせます。Duty SweepやPhaserは「自然物ではない発音体」を補強します。逆にSine、長いDecay、弱い下降へ変えると、射撃よりもUIのキャンセルや滑落へ意味が移ります。

爆発：一つの低音ではなく、帯域が崩れる出来事

爆発プリセットはNoiseを使い、Base Freqを低めへ置き、Punchを0.20〜0.80の範囲から選びます。回によってRepeat、Vibrato、Arpeggio、Phaserも加わるため、連続破裂、うなり、途中の崩落、空洞感が変化します。写実性を上げるなら一発を長くするだけでなく、保存した短い破裂と低い尾をなまずミキサーで重ねる方法も有効です。

パラメータを「知覚される出来事」へ翻訳する

音響パラメータと意味は一対一ではありません。高い音が常に小さく、低い音が常に重いわけではなく、映像、再生機器、文化的な慣習、直前の音との対比で変わります。それでも、設計の出発点になる対応関係はあります。

上昇・下降する音高を視覚的な形や動きへ対応させる傾向は、知覚研究でも観察されています。ただし「上昇音なら必ずジャンプ」と保証する法則ではありません。Lembkeらの実験は、音高と音量のジェスチャーから上向き・下向きや直線・曲線の形を比較的安定して表せる一方、こうした対応には知覚と判断の両方が関わると論じています。 （Lembkeほか, 2023）

実制作では、物理的に正しいかより、映像と同時に鳴らしたとき誤読されないかを確認します。たとえば下降レーザーはドップラー効果の厳密な再現ではありません。それでも、速い下降、短い尾、電子的な倍音が組み合わさることで「何かが射出され、通過した」という記号として機能します。

耳で確かめる7つの比較実験

音作りが上達する最短ルートは、良い値を暗記することではなく、変更前後を保存して一項目だけ比較することです。以下はすべてSE工房だけで試せます。

1. Slideの符号だけを反転する。Square、Base 0.45、Sustain 0.20、Decay 0.18を固定し、Slide +0.20と−0.20を保存します。上昇と下降が動作の意味をどれだけ変えるか聞きます。
2. 4波形を同じ軌跡で鳴らす。FrequencyとEnvelopeを固定し、Square、Saw、Sine、Noiseだけを切り替えます。音高より材質が役割を変える瞬間を探します。音量差はVolumeでおおよそ合わせます。
3. Sustain 0.2と0.4を比べる。値は2倍でも時間は4倍に近くなります。スライダーが非線形であることを、数値ではなく間で確認します。
4. PunchとVolumeを分離する。同じ音でPunchだけを0から0.5へ上げ、次にPunchを戻してVolumeを上げます。頭の手応えと全体の大きさが別物だと分かります。
5. NoiseへLPを掛ける。Explosionを保存し、LP Cutoff 1.0、0.6、0.3を比較します。次に0.3のままResonanceを上げ、暗さと鳴きの違いを聞きます。
6. Vibrato、Arpeggio、Retriggerを一つずつ足す。長めのSineを基準に、連続揺れ、一度の段差、巻き戻しを分離します。三つ同時に入れるのは、違いを聞き分けた後です。
7. Min Freqで終端を切る。下降レーザーのMin Freqを0、0.2、0.4へ変えます。低い値を足す項目ではなく、どこで音を終える項目だと確認します。

プリセットから狙った音へ追い込む制作フロー

1. 役割を一文で決める。「軽いキャラクターが離陸する」「厚い装甲へ小弾が当たる」のように、動作と材質を分けて書きます。
2. 近いプリセットを押す。プリセットは完成音ではなく、役割ごとに制約されたランダムな出発点です。気に入らなくても3〜5回までにして、方向が近い一音を保存します。
3. Base FreqとSlideで軌跡を決める。高さ、上昇・下降、終端が映像に合うまで、音色エフェクトには触れません。
4. Attack、Sustain、Punch、Decayで因果を合わせる。画面上の出来事と音の頭がずれていないか、尾が次の操作へ重なり過ぎないかを見ます。
5. 波形とFilterで材質を選ぶ。役割が伝わった後で、硬さ、明るさ、距離、質量を調整します。
6. Vibrato、Arpeggio、Retrigger、Phaserを必要な分だけ足す。「電子的にしたい」ではなく、「一度だけ段差が欲しい」「尾に空洞が欲しい」と目的を言える項目だけ使います。
7. 保存した基準音とA/B比較する。改善したのか、単に複雑になったのかを判定します。

Preset、Random、Mutateは探索範囲が違う

用途別プリセットは、JumpならSquareと正のSlide、ExplosionならNoiseと強いPunchのように、意味を保つ範囲から値を選びます。Randomはほぼ全パラメータを広く動かすため、想定外の素材を探す機能です。最初のとっかかりには便利ですが、目的音へ近づく保証はありません。

Mutateは現在値を中心に、対象となる各パラメータを約50%の確率で±0.1以内だけ揺らします。波形、Volume、Sample Rateは変えません。つまり骨格を残したテイク違いに向きます。押すたびに前の値は置き換わるので、良い候補が出た時点で必ず「保存」を押してください。

ジャンプ、ヒット、レーザー、爆発のプリセット内部をさらに実装値で比較したい場合は、関連するジャンプ・ヒット・レーザーはなぜそう聞こえるのかも参照してください。本稿が全体の設計図、そちらがプリセットの分解図です。

保存・WAV書き出し・実用確認

SE工房は合成結果をクライアント側でFloat32のサンプル列へ作り、Web Audio APIのAudioBufferへ入れて試聴します。Web Audioの仕様では、スクリプトへ露出する音声サンプルは32-bit float PCMとして扱われます。 （W3C Web Audio API 1.1）

現在のSE工房が作るバッファは44.1kHz・1チャンネルです。WAVダウンロード時に16-bit PCMのモノラルWAVへ変換します。ステレオの広がり、リバーブ、ラウドネス正規化は自動では加えません。短い素材として書き出し、必要ならミキサーや動画編集側で配置と空間を作る設計です。

Volumeは合成終端の振幅へ掛かりますが、知覚上の音量やピークを自動で揃えるNormalizeではありません。PhaserやResonance、波形によってピークと聞こえ方は変わります。書き出し前に、候補を同じ再生環境で比べ、連打して耳に刺さらないか、スマートフォンの小さなスピーカーでも役割が残るか、BGMと重ねて消えないかを確認します。

作ったWAVは、なまずパッドで即時演奏したり、なまずミキサーで複数素材を重ねたりできます。単体音の完成をゴールにせず、「押した瞬間に意味が伝わるか」「他の音と役割が衝突しないか」まで確認して、初めて実用SEになります。

原典と参考資料

• Tomas Pettersson — sfxr project page：2007年のLudum Dare向けに作られた原典。用途別のランダム生成、手動調整、WAV出力という設計目的を作者が説明しています。
• chr15m/jsfxr：Eric FredricksenによるHTML5移植を現在公開・保守するリポジトリ。プリセット、パラメータ、44.1kHzバッファ、WAV生成の系譜を確認できます。
• W3C — Web Audio API 1.1：ブラウザ内の音声処理、AudioBuffer、32-bit float PCMに関する仕様書です。
• Lembkeほか — Auditory shape in pitch, loudness, and tempo gestures：上昇・下降する音高や音量が、視覚的な形や運動とどう対応して知覚されるかを検証した研究です。

数式、パラメータ範囲、プリセット値、WAV形式については、2026年9月時点のなまずSE工房のTypeScript実装と画面を照合しています。sfxr／jsfxrの一般論と、SE工房固有の挙動を混同しないためです。