JianpuRender

专业的浏览器端简谱渲染库，基于TypeScript和SVG技术实现音乐符号精准绘制。支持动态交互与多端适配。

核心功能

✅ 完整简谱符号体系支持

• 音符/休止符（全音符至64分音符）
• 升降记号（#/b）与附点音符
• 12种调号支持（含5个升号调与6个降号调）
• 复杂节拍组合（2/4, 3/8, 5/16等）

🎛 交互特性

• 音符高亮反馈
• 实时音频同步播放
• SVG动画效果支持

🔧 开发者工具

• 类型安全的API设计
• 模块化SVG绘图工具集
• 自动化测试覆盖率85%+

在线演示

基础符号演示
动态音符演示
SVG工具测试

快速开始

npm install jianpurender
# 或
pnpm add jianpurender

import { JianpuSVGRender } from 'jianpurender';

// 初始化容器
const container = document.getElementById('score-container')! as HTMLDivElement;

// 创建渲染实例
const renderer = new JianpuSVGRender(
  {
    notes: [
      { start: 0, length: 1, pitch: 60 },
      { start: 1, length: 1, pitch: 62 },
      { start: 2, length: 1, pitch: 64 },
      { start: 3, length: 1, pitch: 65 },
      { start: 4, length: 1, pitch: 67 },
      { start: 5, length: 1, pitch: 69 },
      { start: 6, length: 1, pitch: 71 },
      { start: 7, length: 1, pitch: 72 }
    ],
    keySignatures: [{ start: 0, key: 0 }],
    timeSignatures: [{ start: 0, numerator: 4, denominator: 4 }]
  },
  { noteHeight: 24 },
  container
);

开发指南

git clone https://github.com/flufy3d/jianpurender.git
cd jianpurender

# 安装依赖
yarn install

# 构建项目
yarn build

# 运行测试
yarn test

# 启动本地演示
yarn demo:serve

贡献规范

1. 提交前运行完整测试套件：

   yarn test-and-build

2. 新功能开发需配套测试用例
3. API变更需更新/node/index.d.ts文件
4. 文档更新同步至/docs/目录

技术栈

• SVG绘图引擎：src/svg_tools.ts
• 乐谱解析器：src/jianpu_model.ts
• 渲染管线：src/jianpu_svg_render.ts