[2026/9/12]

[WEB App] SynthRackGenerator v1.0 — レトロシンセサイザー & FXエンジン(ブラウザ完結型)

[WEB App] SynthRackGenerator v1.0 — レトロシンセサイザー & FXエンジン(ブラウザ完結型)

SynthRackGenerator v1.0

外部ライブラリを一切使わず、ブラウザ標準の Web Audio API と Canvas2D のみで構築されたレトロサウンドジェネレーター＆エフェクトエンジン。

主オシレーターとFM変調用副オシレーターによる合成、ADSR エンベロープ、Biquad Filter、Bitcrusher や Stereo Delay といった DSP エフェクト、さらに 8 ステップのアルペジエーターや Canvas2D ビジュアライザーを備えたオールインワンのモジュラー・サウンドモジュールです。

作成したパッチは LocalStorage への名前付き保存・呼び出しが可能なほか、JSON や URL Hash による共有、および OfflineAudioContext を利用した 16-bit PCM WAV ファイルの即時書き出しに対応しています。

スクリーンショット

メインラック UI

SynthRackGenerator v1.0 — メインラック UI

動画（GIF）

SynthRackGenerator v1.0 — 動作デモ

特徴

  • 完全ブラウザ完結処理:
    外部ライブラリ（Tone.js や Howler.js 等）に依存せず、ブラウザの Web Audio API のみでリアルタイム音響合成と DSP エフェクトを実現。
  • 豊富な音声パラメータ:
    OSC（波形4種 / Detune / FM Depth）、ADSR エンベロープ、Pitch Sweep、Biquad Filter、Bitcrusher (WaveShaperNode)、Stereo Delay などを搭載。
  • 8ステップ・シーケンサー:
    BPM 調整と 4 種類のスケールクオンタイズ（Chromatic / Major / Minor / Pentatonic）に対応したアルペジエーター。
  • リアルタイム Canvas2D ビジュアライザー:
    60fps で動く波形表示（オシロスコープ）と周波数解析（FFT スペクトラムアナライザー）のワンタップ切り替え。
  • LocalStorage パッチ管理スロット:
    ブラウザ内部に名前付きでパッチを複数保存・ロード・削除できるユーザー保存スロット機能。
  • 多彩なデータ入出力 & WAV 書き出し:
    OfflineAudioContext による 16-bit PCM WAV ダウンロード、JSON ファイル書き出し・読み込み、Base64 URL Hash パッチ共有、SFX ランダマイザーを搭載。

モジュール構成

モジュール名主要機能・パラメータ
1. OSCILLATORS & FM主/副オシレーター（Square / Saw / Sine / Triangle, Freq）、Detune、FM Modulation、ノイズジェネレーター
2. ENVELOPESAMP ADSR（Attack, Decay, Sustain, Release）、Pitch Envelope（Pitch Sweep, Sweep Time）
3. FILTER & LFOBiquad Filter（Lowpass / Highpass / Bandpass, Cutoff, Resonance）、Pitch / Filter LFO（Rate, Depth）
4. DSP EFFECTS & MASTERBitcrusher（Bit Depth 2-16bit, Drive）、Stereo Delay（Time, Feedback）、Master Output Volume
Visualizer & Trigger Deckオシロスコープ ↔ スペクトラムアナライザー切替描画、SPACEキー / トリガーボタン発音
5. ARPEGGIATOR / SEQUENCER8ステップ・シーケンサー、BPM制御、スケールクオンタイズ（Chromatic / Major / Minor / Pentatonic）
Preset & ExportLocalStorage スロット保存/呼び出し/削除、JSON Import/Export、URL Hash 共有、Offline WAV レンダリング

使い方

1. 音色の構築・調整

モジュール 1〜4 の各種スライダーを操作して音色を作成します。 TRIGGER SOUND (SPACE) ボタンまたは PC キーボードを押すことでリアルタイムに発音確認ができます。Randomize ボタンを押すと、ランダムな効果音パラメータを生成できます。

2. シーケンサーでの自動演奏

モジュール 5（8-STEP ARPEGGIATOR / SEQUENCER）で START SEQ をクリックすると 8 ステップの自動演奏が始まります。 各ステップの ON/OFF と半音（St）オフセット値、BPM、スケール形式を変更することで多彩なフレーズを作成できます。

3. LocalStorage パッチ管理

トップバーのパッチ管理エリアでパッチ名（例: My Patch 1）を入力し Save Slot を押すと、ブラウザ内に音色パラメータが保存されます。 保存したパッチはドロップダウンから選択して Load でいつでも呼び出せます。

4. パッチ共有と WAV ファイルエクスポート

  • Download WAV: OfflineAudioContext を使用して現在の設定の音声を 16-bit 44.1kHz PCM WAV ファイルとしてレンダリングしダウンロード。
  • Export / Import JSON: 設定値を構造化 JSON ファイルとして保存・復元。
  • Copy URL: パッチ設定を Base64 化して URL ハッシュに埋め込み、リンク共有が可能。

キーボード操作 (DAWモード)

キー操作内容
Z ~ Mノート演奏 (C4 〜 B4)
Q ~ Uノート演奏 (C5 〜 B5)
SPACE音声トリガー発音
ESCサウンド停止 / 画面フォーカスリセット

技術スタック

  • Web Audio API (AudioContext / OfflineAudioContext / AudioNode) — リアルタイム音源合成・エフェクト処理・WAV生成
  • Canvas2D API — 60fps オシロスコープ / FFT 周波数アナライザー描画
  • JavaScript (ES6+) — パラメータ状態管理・シーケンサータイマー・LocalStorage 制御
  • Astro — Webアプリケーション基盤

技術記事

更新履歴

  • [2026-09-11]: v1.0 初回公開。
    • Web Audio API による基本音響パイプライン（OSC/ADSR/Filter/Bitcrusher/Delay）構築
    • 8ステップ・シーケンサーおよび 4 種スケールクオンタイズ機能
    • Canvas2D 波形（オシロスコープ）/ スペクトラムアナライザー切替表示
    • LocalStorage によるブラウザ内ユーザープリセット保存スロット搭載
    • OfflineAudioContext による WAV ファイルエクスポート
    • JSON インポート/エクスポートおよび URL Hash パッチ共有機能対応