之前的痛点是 Guitar Pro 文件只能在电脑上看，手机上一堆 .gp5 文件没法预览。alphaTab 正好能解这个 —— 它把 GPX 二进制解析成 SVG，浏览器直接显示。

功能

• GPX 乐谱渲染 + 播放（alphaTab 解析 Guitar Pro 3-8）
• PDF 在线预览（iframe 嵌入）
• 图片画廊（带下载按钮）
• 全局搜索（歌名 + 分类名）
• 两层导航：分类卡片 → 谱子列表
• 多格式切换（同一首有 GPX + PDF + 图片时）
• 蓝奏云 / 夸克网盘备份链接

几个坑

alphaTab 1.8 load() 变了

旧版是回调模式 api.load(data, success, error)，1.8 改成同步返回 boolean。之前一直报错，翻源码才发现签名变了：

const uint8 = new Uint8Array(buffer);
const success = api.load(uint8);

中文路径

fetch 直接拿中文文件名会 404。需要对路径逐段编码：

function encodeAssetPath(path) {
  return path.split('/').map(s => encodeURIComponent(s)).join('/');
}

stylesheet 某些 Map 是 undefined

某些 GP5 文件解析后 score.stylesheet.perTrackMultiBarRest 不初始化，渲染时调用 .has() 报 Cannot read properties of undefined。在 scoreLoaded 事件里补上：

api.scoreLoaded.on((score) => {
  const ss = score.stylesheet;
  if (!ss.perTrackMultiBarRest) ss.perTrackMultiBarRest = new Map();
  if (!ss.perTrackDisplayTuning) ss.perTrackDisplayTuning = new Map();
  if (!ss.perTrackChordDiagramsOnTop) ss.perTrackChordDiagramsOnTop = new Map();
});

alphaTab 的 CDN 版用 Blob Worker 跑 Web Worker，Cloudflare Pages 静态托管没遇到问题，但保险起见还是关掉了 useWorkers: false。

两层导航

一级是分类卡片（按艺术家或风格），二级是标签筛选。数据全部前台 JSON 渲染，没有后端接口。分类卡片用 CSS Grid 自适应，手机端自动变成单列。

部署

Vercel 连 GitHub 仓库，自动识别静态站点，git push 后自动上线。

项目地址：https://github.com/cleanwrite/fwjita-share

线上地址：https://fwjita.de5.net

你好，欢迎来到 fw 的 blog，所有节点已更新至最新版本，更新日期为2026.8.15，如果你有任何问题请联系留下的联系方式，感谢您的使用和反馈，谨记网址https://fwblog.de5.net

一个静默音频播放程序。

这是通过博客提供的分享内容，如需获取更多资源，请使用验证码解锁下方区域。