Keyboardia

Keyboardia

リアルタイムの共同作業を実現する、ポリリズムパターン対応のマルチプレイヤー・ステップシーケンサーです。

機能

• リアルタイムマルチプレイヤー - 最大10人のプレイヤーが同じセッションで一緒に演奏できます
• ポリリズムパターン - 各トラックで3～128ステップの長さを設定できます（3連符に適した値を含む26種類の選択肢）
• 70種類のサウンドジェネレーター - Web Audioシンセサイザー32種類、Tone.js FM／AMシンセサイザー11種類、サンプリング音源27種類
• 27種類のサンプリング音源 - グランドピアノ、808キット、アコースティックドラム、ハモンドオルガン、カリンバ、スティールドラム、ストリングス、ギター、サックスなど
• エフェクトチェーン - リミッター付きのリバーブ、ディレイ、コーラス、ディストーション（マルチプレイヤー間で完全に同期）
• パラメーターロック - ステップごとのピッチ、音量、タイノートのオートメーション
• クロマチックグリッド - 2つの表示モード：「イベント」（キーの音程間隔＋使用中のピッチ）と「すべて」（-24～+24の49ピッチ）
• スケールロック - 選択した音階にクロマチックグリッドを制限し、音階外の音を警告します
• スケールサイドバー - ルート音／5度を強調し、使用中の音をハイライトして音階を視覚化します
• トラックごとのスウィング - グルーヴを調整するための全体およびトラックごとのスウィング設定
• セッション共有 - リンクの共有、ほかのユーザーの作品のリミックス、変更不可のセッションの公開
• QRコード共有 - モバイル端末でのセッション共有に対応
• エージェントによるリズム編集（実験的機能） - ステートレスMCPを介したセッションの共同編集、作成、リミックス、公開、エクスポート、分析

エージェントと一緒に使う

次の設定でMCPクライアントを構成します。

https://keyboardia.dev/mcp

既存の音楽を共同編集するには、セッションを開き、https://keyboardia.dev/s/{session_id} URLに含まれるUUIDをエージェントに渡します。エージェントは現在のリズムを読み取り、トラックを追加し、特定のステップを割り当て、テンポを変更できます。編集内容は、接続中のブラウザーと同じライブセッションに反映され、公開済みのセッションは読み取り専用のままです。

エージェントは何もない状態から始めることもできます。新しいセッションを作成してリンクを返したり、公開済みのセッションを元の内容に触れずに編集可能なコピーへリミックスしたり、依頼に応じて現在の結果を変更不可のスナップショットとして公開したり、セッションをDAW用のMIDIファイルとしてエクスポートしたりできます。

音楽についての説明もできます。セッションのキー、リズム同士の関係、ある時点で形成されるコードなどを尋ねると、Key Assistantが使用するものと同じ音楽理論モジュールに基づいて回答し、不確実性も隠さずに示します。

正確なツール契約と現在の制限については、ステートレスMCPリズムスライス仕様をご覧ください。ディレクトリのメンテナーは標準のMCP掲載情報を利用できます。また、ホストされたデータの取り扱いについては、MCPプライバシー通知をご覧ください。

技術スタック

• フロントエンド：React 19、TypeScript、Vite
• オーディオ：Web Audio API、Tone.js
• バックエンド：Cloudflare Workers、Durable Objects、KV Storage
• リアルタイム通信：Hibernation APIを使用したWebSocket

はじめに

cd app

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm run test:all

# Build for production
npm run build

開発

デバッグモード

URLに?debug=1を追加すると、デバッグ機能が有効になります。

• イベントのトレース
• オーディオ状態のデバッグ
• ログの永続保存
• バグパターンの検出

デバッグについて詳しくは、docs/DEVELOPMENT-TOOLS.mdをご覧ください。

プロジェクト構成

app/
├── src/
│   ├── audio/           # Audio engine, synths, effects, scheduling
│   ├── components/      # React UI components
│   ├── hooks/           # React hooks (useSession, useMultiplayer, etc.)
│   ├── state/           # State management (grid reducer)
│   ├── sync/            # Multiplayer synchronization
│   ├── worker/          # Cloudflare Worker (Durable Objects, API routes)
│   ├── utils/           # Logging, debugging, utilities
│   └── debug/           # Debug overlay and context
├── e2e/                 # End-to-end tests (Playwright)
├── test/                # Integration tests
└── scripts/             # Development and debugging scripts

主要ファイル

ファイル	説明
app/src/audio/engine.ts	メインのオーディオエンジン。すべてのオーディオサブシステムを統括します
app/src/audio/scheduler.ts	ドリフトのない先読みスケジューリング（タイマー25ms、先読み100ms）
app/src/audio/synth.ts	16ボイスのポリフォニックシンセサイザー。ボイススティーリングに対応
app/src/audio/toneSynths.ts	Tone.jsシンセサイザーマネージャー（FM、AM、Membraneなど）
app/src/audio/toneEffects.ts	エフェクトチェーン（リバーブ、ディレイ、コーラス、ディストーション）
app/src/sync/multiplayer.ts	リアルタイム同期用WebSocketクライアント
app/src/worker/live-session.ts	セッション状態を管理するDurable Object

テスト

cd app
npm run test:unit          # Unit tests (vitest, fast product lane)
npm run test:audio-render  # Offline audio renders (native Web Audio)
npm run test:verification-tooling  # Tests of the verification tooling itself
npm run test:integration   # Integration tests (Cloudflare Workers)
npm run test:all           # All of the above
npm run analyze:bugs       # Static bug pattern analysis

アーキテクチャ

オーディオ信号チェーン

Source (Oscillator/Sample)
    → Track Gain (per-track volume)
    → Master Gain
    → Effects Chain (Tone.js: reverb → delay → chorus → distortion)
    → Limiter
    → Compressor
    → Destination

シンセエンジン

1. SynthEngine (synth.ts) - ネイティブの Web Audio オシレーター、40 種類以上のプリセット
2. ToneSynthManager (toneSynths.ts) - Tone.js の FM／AM／Membrane シンセ
3. AdvancedSynthEngine (advancedSynth.ts) - フィルターエンベロープと LFO を備えたデュアルオシレーター
4. SampledInstrument (sampled-instrument.ts) - サンプルベースの再生（ピアノ）

マルチプレイヤーアーキテクチャ

Client A ←→ Durable Object ←→ Client B
              ↓
        DO Storage (immediate)
              ↓
        KV Storage (on disconnect)

• 各セッションは単一の Durable Object インスタンスです
• WebSocket 接続では、コスト効率を高めるために Hibernation API を使用します
• 状態の変更は、接続中のすべてのクライアントにブロードキャストされます
• ハイブリッド永続化： 変更は DO ストレージに即座に保存され、切断時に KV が更新されます

ドキュメント

• ROADMAP.md - 実装フェーズとステータス
• SYNTHESIS-ENGINE.md - オーディオアーキテクチャの仕様
• SHARING-AND-PUBLISHING.md - セッション永続化の仕様
• DEVELOPMENT-TOOLS.md - デバッグツールのリファレンス
• UI-PHILOSOPHY.md - デザイン原則
• LESSONS-LEARNED.md - デバッグの体験談

ライセンス

MIT

同梱されている楽器サンプルは、独自のライセンス（CC0、パブリックドメイン、および同様の自由利用条件）を持つサードパーティーコンテンツです。詳細は app/public/instruments/LICENSE.md に記載されています。