ToneSynth
概要
ブラウザで動く 4×4 パッドシンセサイザー（PWA）。
Ionic + Tone.js で作っています。
パッドをタップして音を鳴らし、スライダーでエフェクトを調整できます。
技術スタック
- フロント: Angular 19 / Ionic 8 / TypeScript
- オーディオ: Tone.js 15 / Web Audio API
- 配信: Netlify（PWA）
できること
- 4×4（16音）のタッチ／クリックパッド
- 7 本のエフェクトスライダー（Filter / Vibrato / Chorus / Delay / Reverb）
- スマホ・PC ブラウザ対応（PWA としてホーム画面に追加可能）
シンセ仕様
| 項目 | 値 |
|---|---|
| オシレーター | 三角波（triangle） |
| 同時発音数 | 6 音（7 音目以降は最も古い音が止まる） |
| エンベロープ | attack 0.04s / decay 1s / sustain 1 / release 4s |
パッド（16音）
| C4 | D4 | E4 | F4 |
| G4 | A4 | B4 | C5 |
| D5 | E5 | F5 | G5 |
| A5 | B5 | C6 | D6 |
シグナルチェーン
PolySynth → Filter → Vibrato → Chorus → Delay → Reverb → 出力
エフェクトスライダー
| 名前 | 範囲 | 説明 |
|---|---|---|
| Filter | 40〜400 | オートワウフィルターの基準周波数。低いほどこもった音、高いほど明るい音 |
| Vibrato | 0〜10 | ビブラート（音程の揺れ）の速さ |
| Chorus | 0〜1 | コーラス（厚み・うねり）の強さ |
| DelayTime | 0〜1 | ディレイ（エコー）の遅延時間（秒） |
| DelayFeedback | 0〜1 | ディレイのフィードバック量。高いほどエコーが長く残る |
| ReverbRoomSize | 0〜0.9 | リバーブの部屋の大きさ。高いほど広い空間感 |
| ReverbWet | 0〜100 | リバーブの混合量（%）。高いほど残響が強くなる |
工夫した点
PolySynth とエンベロープ、7 種類のエフェクトを組み合わせ、リアルタイムに音色を変更できる UI を構築しました。
同時発音数を 6 音に制限し、古い音から自動で止めることでモバイルでも安定して動作します。
PWA 対応により、スマホ・PC のホーム画面からアプリのように利用できます。