jianpurender
Version:
Render music score using SVG on browsers.
102 lines (76 loc) • 2.44 kB
Markdown
# JianpuRender
专业的浏览器端简谱渲染库，基于TypeScript和SVG技术实现音乐符号精准绘制。支持动态交互与多端适配。
## 核心功能
✅ 完整简谱符号体系支持
- 音符/休止符（全音符至64分音符）
- 升降记号（#/b）与附点音符
- 12种调号支持（含5个升号调与6个降号调）
- 复杂节拍组合（2/4, 3/8, 5/16等）
🎛 交互特性
- 音符高亮反馈
- 实时音频同步播放
- SVG动画效果支持
🔧 开发者工具
- 类型安全的API设计
- 模块化SVG绘图工具集
- 自动化测试覆盖率85%+
## 在线演示
[基础符号演示](https://flufy3d.github.io/JianpuRender/basic_symbols.html)
[动态音符演示](https://flufy3d.github.io/JianpuRender/active_notes.html)
[SVG工具测试](https://flufy3d.github.io/JianpuRender/svg_tools_test.html)
## 快速开始
```bash
npm install jianpurender
# 或
pnpm add jianpurender
```
```typescript
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
);
```
## 开发指南
```bash
git clone https://github.com/flufy3d/jianpurender.git
cd jianpurender
# 安装依赖
yarn install
# 构建项目
yarn build
# 运行测试
yarn test
# 启动本地演示
yarn demo:serve
```
## 贡献规范
1. 提交前运行完整测试套件：
```bash
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`
