caged

ギターのオープンコード C / A / G / E / D（CAGED） を、AlphaTex（.atex）で書き、ブラウザで表示する最小サンプルです。

仕組み

• CAGED.atex: AlphaTex ソース（@coderline/alphatab の ScoreLoader.loadAlphaTex でパース可能）
• 五線譜＋タブ譜: src/atexVexflow.js がパース結果から標準記譜とタブ（fret / string）を取り、VexFlow で二段（Stave + TabStave、左に brace）の SVG を描画。ピアノの大譜表ではなく、ギター用の高音譜表＋TAB です。
• 音の高さ: alphaTab の realValue は実音。ギター＋ト音記号の五線は楽譜慣例で1オクターブ高く書くため、五線用の音名だけ +12 半音（＋Staff.displayTranspositionPitch）しています。タブのフレットは実音のままです。
• コード図: src/jpChordDiagrams.js で日本式の横指板（alphaTab の描画ではなく自前 SVG）

alphaTab の AlphaTabApi（譜面レンダラ）は使っていません。パーサとしてのみ @coderline/alphatab を利用します。

Files

• CAGED.atex: CAGED の AlphaTex
• src/atexVexflow.js: AlphaTex → VexFlow
• src/jpChordDiagrams.js: 横指板コード図
• src/main.js: CAGED.atex を読み込み、上記を表示

Setup

npm install

Run (dev)

npm run dev

ブラウザで表示された URL（例: http://localhost:5173）を開くと、日本式コード図と VexFlow の五線が表示されます。

Build

npm run build
npm run preview

制限

• VexFlow 側は 標準五線の音符・休符・拍子 など簡易な情報に寄せています。AlphaTex の全機能（タブ詳細・奏法の細部など）をそのまま再現するわけではありません。
• 複雑なスコアは src/atexVexflow.js の拡張が必要です。