MPC × SP-404を足したサンプラーを、ブラウザだけで作ってみた話

きっかけ

「AKAI MPCとRoland SP-404を足して2で割ったようなツールが欲しい」

そんな思いつきから始まったのが、今回作ったPAD/16というWebアプリです。インストール不要、ブラウザを開くだけで動くサンプラー＆ステップシーケンサーで、現在 pad16.four5ive.net で公開しています。

MPCの「パッドを叩いてステップシーケンスを組む」感覚と、SP-404の「サンプルをチョップしてエフェクトをかける」感覚。この2つをひとつの画面に詰め込みたい、というのが出発点でした。

できること

最終的に出来上がったのは、こんな機能を持つツールです。

• 16パッドでのワンショット再生

• パッドへのマイク録音、または音声ファイルの読み込み（ドラッグ&ドロップ対応）

• 波形を見ながら範囲を切り出すサンプルチョップ

• ピッチ・フィルター（LPF/HPF/BPF）・ドライブ・ビットクラッシュ・ディレイ・リバーブ・パン・リバース再生という、SP-404を意識したFXチェーン

• 8パターンのステップシーケンサー（1パターン＝1小節固定、解像度を1/8〜1/64・3連符まで切り替え可能）

• パターンを並べて曲のように再生するSONGモード

• 完成した音をWAVファイルとして書き出すエクスポート機能

• MIDIコントローラーでの演奏に対応（Web MIDI API）

• 著作権フリーの合成ドラムキットをデフォルト搭載（Web Audio APIでその場生成した音なので、誰でも自由に使える）

ここまで聞くと結構な規模のソフトウェアに思えるかもしれませんが、これ全部1枚のHTMLファイルで完結しています。外部サーバーも、ビルドツールも、フレームワークも一切なし。ブラウザに搭載されている Web Audio API だけで、録音・再生・エフェクト・シーケンス・書き出しまで全部やっています。

作り方は「会話しながら積み木を重ねる」感じだった

今回はClaudeと対話しながら機能を一つずつ足していくスタイルで作りました。最初のリクエストは本当にシンプルで、

という一言から始まり、そこから

1. まずは16パッド＋マイク録音の最小構成を作る

2. ファイルアップロードに対応

3. 波形を見ながらサンプルをチョップできるようにする

4. SP-404相当のエフェクト（フィルター/ドライブ/ローファイ/ディレイ/リバーブ/リバース）を追加

5. パターンを複数持てるようにして、シーケンサーを強化（ベロシティ、Swing、パターンごとのBPM）

6. パターンを並べるSONGモードと、WAVへのエクスポートを追加

7. MIDIコントローラーでパッドを叩けるように

8. ステップの解像度（1/8〜1/64・3連符）を切り替えられるように

という順番で、欲しい機能をひとつずつ伝えては実装してもらう、を繰り返しました。最初から完璧な設計図があったわけではなく、触ってみて「ここはこうしたい」と思ったところを直していく、まさに実機のパッドコントローラーを弄るような感覚で開発が進んだのが面白かったところです。

途中、細かい不具合（ボタンの文字がはみ出す、空のパッドなのに「empty」の表示が消えない、UIの高さがバラバラで段差ができる、など）も都度報告しては直す、を繰り返しました。実際に手を動かして触ってみないと気づけないことばかりで、「作って終わり」ではなく「使いながら育てる」プロセスの大事さを改めて感じました。

技術的に面白かったポイント

全部Web Audio APIのネイティブノードだけで組んでいる

リバーブもディレイもビットクラッシュも、外部のサウンドライブラリは一切使っていません。BiquadFilterNode、WaveShaperNode、DelayNode、ConvolverNodeといった、ブラウザ標準のノードを組み合わせるだけで、SP-404相当のエフェクト群を再現しています。

リバーブに関しては、リアルな音源データを使うのではなく、ホワイトノイズを減衰させて作った「インパルス応答」をConvolverNodeに渡すことで、それっぽい残響を生成しています。

デフォルトキットも全部その場で音を生成

著作権フリーのドラムキットが欲しい、というリクエストに対しては、外部の音源ファイルを探すのではなく、サイン波スイープやシェイプドノイズを使ってキック・スネア・ハイハットなどをその場で合成する、という方向で解決しました。808/909系のドラムマシンが使っている合成手法をそのままJavaScriptで再現した形です。これなら著作権を気にせず、誰でも自由に使えます。

ステップシーケンサーは「小節」を固定し、解像度だけを可変にする

最初は「32ステップ固定」で作っていたのですが、「解像度を変えると小節の長さまで変わってしまう」という指摘をもらい、設計を見直しました。最終的には**「1パターン＝1小節」を固定し、解像度（1/8〜1/64や3連符）に応じてステップ数を自動計算する**方式に落ち着いています。地味な変更ですが、音楽的に正しい挙動にするための重要な修正でした。

公開まわりの話

公開にあたっては、さくらインターネットのレンタルサーバーにアップロードする形を取りました。1枚のHTMLファイルなので、サーバー側の特別な設定はほぼ不要です。ただし、

• マイク録音やMIDI接続はHTTPS必須（セキュアコンテキストでないと動かない）

• SNSでシェアされたときにきちんとカードが表示されるよう、OGP画像・faviconもあわせて用意

といった点は意識して整えました。OGP画像やfaviconはSVGでデザインしたあと、PNG/ICOにも変換して、対応していないブラウザ・クローラーでも崩れないようにしています。

おわりに

「ブラウザだけで動くツール」というのは、配布のハードルがとにかく低いのが魅力です。インストールも、アプリストアの審査も、サブスクリプションも不要。リンクを踏めばすぐに使える。今回のPAD/16もそんな気軽さを大事にしながら作りました。

機材としてのMPCやSP-404の「叩いて作る」楽しさを、少しでもブラウザの中に持ち込めていたら嬉しいです。よかったら覗いてみてください。

この記事はAIアシスタント（Claude）と対話しながらツールを開発した記録として書きました。実装の裏側に興味がある方や、似たようなツールを作りたい方の参考になれば幸いです。