[WEB App] SID Player v3.2 — reSID + fake6502 WASM + AudioWorklet によるブラウザ完結型 Commodore 64 SIDプレイヤー
SID Player — Commodore 64 SID Music Player
1980年代に世界で最も売れたパソコン「Commodore 64(C64)」に搭載された伝説的音源チップSID(MOS 6581/8580)を、ブラウザ上で完全にエミュレートし、.sidファイルをリアルタイムに再生するWebプレイヤーです。
C++製のSIDチップエミュレーター「reSID」とC製の6502 CPUエミュレーター「fake6502」をEmscriptenでWASMビルド(82KB)し、AudioWorkletスレッド内で直接ロードしてリアルタイム音声合成を行っています。サーバーへのファイルアップロードは一切不要で、すべてブラウザ内で完結します。
ツール
SID Player
Commodore 64 SID音源プレイヤー。.sidファイルをドロップして再生。3Voice分離波形表示、チップモデル切替対応。
lain-lab.comスクリーンショット
3Voice分離波形表示:
波形 + スペクトラム(Bothモード):
3D Terrain:
動画(GIF):
.sidファイルの入手先
.sidファイルはHVSC(High Voltage SID Collection)やDeepSIDから入手できます。
DeepSID — Online SID Player
HVSC(High Voltage SID Collection)ベースのオンラインSIDプレイヤー。数万曲の.sidファイルをダウンロード可能。
deepsid.chordian.net
HVSC — High Voltage SID Collection
世界最大のSID楽曲アーカイブ。50,000曲以上の.sidファイルを収録。
hvsc.c64.org特徴
reSID + fake6502 による完全エミュレーション
産業標準のSIDチップエミュレーター「reSID」が、MOS 6581/8580の波形生成、アナログフィルター、ADSRエンベロープをトランジスタレベルで再現。パブリックドメインの6502 CPUエミュレーター「fake6502」が.sidファイル内の6502マシン語を実行し、SIDレジスタに書き込みます。
AudioWorkletによるリアルタイム音声合成
WASMバイナリ(82KB)をAudioWorkletスレッド内で直接instantiateし、128サンプル(約2.9ms)単位でリアルタイム音声合成を行います。メインスレッドのUI処理に影響を与えません。
3Voice分離波形ビジュアライザー
SIDの3つの独立したオシレーターの出力を個別に取り出し、赤(Voice 1)、緑(Voice 2)、青(Voice 3)の波形としてリアルタイム表示。ミックス波形と周波数スペクトラムの表示も対応。リングバッファによるスクロール表示で波形の経時変化が見やすくなっています。
3Dリボンビジュアライザー
Three.jsによる3D空間上のリボンメッシュで3Voice波形を立体表示。512ポイント×3本のBufferGeometryリボンが、voiceBuffersからの線形補間とピーク自動スケールにより滑らかに波形を再現。UnrealBloomPassによる発光エフェクトとOrbitControlsによるカメラ操作に対応。
Audio-Reactive 3Dテレイン
fbm(Fractal Brownian Motion)+ Simplexノイズによるプロシージャルワイヤーフレーム地形。SIDのAnalyserNodeから取得したbass周波数帯に連動して地形がうねり、発光色が変化。3Dリボンがテレイン上を浮遊する演出で、SID音楽を視覚的に体験できます。
10バンドEQ & プリセット機能
10バンドのイコライザーを搭載し、c64warm や c64bright をはじめとする各種プリセット切替およびカスタム調整に対応。
可変UI & パネルリサイズ
ドラッグおよびタッチ操作による左右パネルの無段階リサイズに対応。直感的なレスポンシブ配置に対応しています。
チップモデル切替(MOS 6581 / MOS 8580)
初期型6581(12V駆動、泥臭いアナログ歪み)と後期型8580(9V駆動、クリアなサウンド)をリアルタイムに切り替えて音色の違いを比較できます。
SIDレジスタモニター
$D400-$D41Fの32レジスタの値をリアルタイムに16進数表示。変化したレジスタがハイライトされ、SIDプログラムの動作を視覚的に確認できます。
完全ローカル処理
.sidファイルはブラウザのメモリ内でのみ処理されます。外部サーバーへのアップロードは一切ありません。
82KBの軽量WASMバイナリ
reSID + fake6502 + PSIDパーサー + C64メモリマップの全機能が82KBに収まっています。初回ロードが高速で、モバイルブラウザでも快適に動作します。
使い方
-
.sidファイルをドロップまたは選択する- 画面左上の破線エリアに
.sidファイルをドラッグ&ドロップするか、クリックしてファイルを選択します。ビューポート領域へのドロップにも対応しています。 - ファイルを読み込むと自動的に再生が開始されます。
- 画面左上の破線エリアに
-
再生を操作する
- ▶/⏸ ボタンで再生/一時停止を切り替えます。一時停止後の再開は途中からの再生です。
- ■ ボタンで完全停止(最初に戻る)。◀◀/▶▶ ボタンで前曲/次曲に切り替え(複数曲収録の.sidファイル)。
-
チップモデルを切り替える
- CHIP MODELセクションでMOS 6581 / MOS 8580を選択すると、リアルタイムに音色が変わります。
-
音質とビジュアルの調整
- 10バンドEQで音質をカスタマイズ。
- VISUALIZERでWaveform/Spectrum/Both/3D Ribbon/3D Terrainの5モードを切り替え可能。
- 3D Ribbonモード:3Voice波形をBloom付きリボンメッシュで立体表示。マウスドラッグでカメラ回転、スクロールでズーム。
- 3D Terrainモード:SIDオーディオ連動のプロシージャル地形の上にリボンが浮遊。Colorピッカーでテレインの発光色を変更可能。
- レジスタ情報やクレジットは右パネルへ集約され、境界線をドラッグすることでパネル幅を自由にリサイズできます。
-
ビジュアライザーを楽しむ
- VISUALIZERセクションでWaveform/Spectrum/Bothモードを切り替え。色も変更可能。
- 3Voice分離波形(赤/緑/青)で各オシレーターの動きを視覚的に確認できます。
-
SIDレジスタを観察する
- SID REGISTERSセクションで32レジスタの値がリアルタイムに更新されます。
.sidファイルとは
.sidファイルはMIDIや音声データではなく、Commodore 64の6502 CPU用マシン語プログラムそのものです。ファイル先頭にPSID/RSIDヘッダー(タイトル、作者、init/playアドレス等)が付き、その後にC64のRAMに配置される実行バイナリが続きます。
再生するには6502 CPUでマシン語を実行し、SIDチップのレジスタ(D41F)に値を書き込むことで音声を生成します。本プレイヤーはこの一連の処理をすべてブラウザ内のWASMで実現しています。
技術スタック
- Astro — ページ構築
- reSID — SIDチップエミュレーション(C++, MOS 6581/8580対応)
- fake6502 — 6502 CPUエミュレーション(C, パブリックドメイン)
- Emscripten — C/C++ → WASM ビルド(STANDALONE_WASM, 82KB)
- AudioWorklet — リアルタイム音声処理スレッド
- WebAudio API — GainNode, AnalyserNode
- Canvas 2D — 波形/スペクトラム描画
- Three.js r160 — 3Dリボンメッシュ、Audio-Reactiveテレイン、UnrealBloomPass、OrbitControls
開発の経緯
「数日はかかるだろう」と踏んでいたSIDプレイヤーの実装が、わずか数時間で完成した。reSIDのEmscriptenビルドは最初から通り、AudioWorkletでの_initialize()呼び忘れとmemoryエクスポート名の不一致で1時間格闘した後、テストトーンの「ブーーー」が鳴った。
fake6502(パブリックドメインの6502 CPUエミュレーター)をCブリッジファイルで分離コンパイルして組み込み、PSIDヘッダーパーサーとC64メモリマップを配線。.sidファイルをドロップした瞬間、スピーカーから40年前のSIDサウンドが響いた。
その後、3Voice分離出力のためにreSIDのvoice[3]配列をpublic化してWASMリビルド、リングバッファによるスクロール波形表示、チップモデル切替、一時停止/再開機能を追加して現在のv1.0に至る。
SIDチップについて
SID(Sound Interface Device / MOS 6581・8580)は、Commodore 64に搭載されたカスタム音源チップ。設計者はBob Yannes(後にEnsoniqを創業)。
- 3基の独立したオシレーター(鋸歯状波、三角波、パルス波/PWM、ノイズ)
- ハードウェア・リングモジュレーションとオシレーター同期
- 本格的なADSR(Attack/Decay/Sustain/Release)エンベロープ制御
- アナログフィルター(Low-pass / Band-pass / High-pass 切替可能)
SIDは「ゲームの効果音発生器」ではなく「1チップに凝縮された本格派アナログ・シンセサイザー」であり、Rob Hubbard、Martin Galway、Chris Hülsbeckらの名コンポーザーが生み出した楽曲は、ゲームミュージックの枠を超えた音楽ジャンルとして今なお世界中で愛されている。
[Computer] なぜ日本では無名?世界で最も売れたパソコン Commodore 64
世界累計販売台数1,250万〜1,700万台。北米・欧州を席巻した怪物PC Commodore 64の歴史。
lain-lab.com
[Computer] SIDチップが生んだC64音楽文化
MOS 6581/8580 SIDチップの技術仕様と、Rob Hubbardらが切り開いたSID音楽文化の系譜。
lain-lab.com関連ツール
JP2 (JPEG 2000) Image Converter
JPEG 2000ファイルをブラウザで変換。OpenJPEG WASM使用。
lain-lab.com
STEP / IGES 3D Viewer
CADファイルをブラウザで3D表示。occt-import-js WASM使用。
lain-lab.com更新履歴
-
[2026/09/07]: v3.2 RSID IRQ 駆動再生対応
- C64 カーネル環境構築(IRQ ディスパッチャ
$FF48、ベクタ$FFFE/$FFFF、$0314/$0315) - CPU アイドルループ(CLI + JMP self at
$EA7E) - 手動 IRQ トリガー(fake6502 の irq6502() に依存しない実装)
- CIA1 割り込み制御レジスタ (0xDC0D) エミュレーション(read-clear 挙動)
- VIC-II ラスタ割り込みステータス ( $D019 ) エミュレーション(write-acknowledge 挙動)
- レンダーループ分岐(playAddr=0 時は exec6502 + trigger_irq_manual)
- jsr6502() のトラップ先を $FFFF → $FFFC に変更(IRQ ベクタ破壊防止)
- parseSidHeader 修正(dataOffset 読み取り、loadAddr=0 対応)
- デバッグ用エクスポート関数追加(sid_debug_irq_state / cpu_state / irq_count)
- ビルドスクリプト build_sid.sh 作成
[Astro] #131 SID Player v3.2 — RSID IRQ駆動再生対応・CIA1/VIC-II エミュレーション追加
SID Player に RSID フォーマット(playAddr=0)の IRQ 駆動再生を追加。C64 カーネル環境構築(IRQ ディスパッチャ・ベクタ設定)、手動 IRQ トリガー、CIA1 割り込み制御レジスタ (0xDC0D) と VIC-II ラスタ割り込みステータス (\$D019) の最低限エミュレーションを実装。Nemesis(1987 Konami)等の RSID ファイルが再生可能に。
lain-lab.com - C64 カーネル環境構築(IRQ ディスパッチャ
-
[2026/09/02]: v3.1
- WASM再ビルド
- PAL/NTSC自動検出
- SIDモデル検出
- Speed制御
-
[2026/09/02]: v3.0
- Three.js 3Dビジュアライザー追加。
- 3Dリボンモード(512ポイントBufferGeometry+UnrealBloomPass+OrbitControls)
- Audio-Reactive 3Dテレインモード(fbm/Simplexノイズシェーダー+SID bass連動)
- Colorピッカーによるテレイン発光色変更
-
[2026/09/01]: v2.0
- 10バンドEQ&8種プリセット
- プレイリスト&ループモード追加
- AudioWorklet並走バグ修正(Node使い回し化)
- 3Voiceリアルタイムキーボード表示
- ウィンドウリサイズ機能
- Duration設定/経過時間バー追加
- 右パネルレイアウト再構成
-
[2026/09/01]: v1.0
- .sid再生
- 3Voice分離波形
- チップモデル切替
- SIDレジスタモニター
- 一時停止/再開
- ボリューム調整
[Astro] #120 SID Player — reSID + fake6502 WASM + AudioWorklet によるブラウザ完結型 Commodore 64 SIDプレイヤー
C64のSIDチップエミュレーター(reSID)と6502 CPUエミュレーター(fake6502)をEmscriptenでWASMビルドし、AudioWorkletでリアルタイム音声合成。.sidファイルのブラウザ再生、3Voice分離波形表示、チップモデル切替(MOS 6581/8580)に対応。
lain-lab.com -
[2026/08/31]: v0.2
- v0.1: reSID + fake6502をWASM化
- v0.2: AudioWorkletで.sidファイルを再生
[JavaScript] reSID + fake6502をWASM化してAudioWorkletで.sidファイルを再生する ― ブラウザ完結SIDプレイヤー構築記 // PROTOCOL.LAIN
reSID(MOS 6581/8580エミュレーター)とfake6502(6502 CPUエミュレーター)をEmscriptenでSTANDALONE_WASMビルドし、AudioWorkletスレッド内で直接WASMをinstantiateしてリアルタイム音声合成を実現。PSIDヘッダー解析、C64メモリマップ配線、50Hz playルーチン呼び出しまで。
lain-lab.com