# Verovio渲染乐谱

**Repository Path**: ifredom/verovio-rendered-score

## Basic Information

- **Project Name**: Verovio渲染乐谱
- **Description**: 一个跨平台的乐谱渲染js-sdk，基于Verovio，支持 mei, musicxml 类型文件渲染，支持扩展abc.js，支持播放，光标前进，乐谱分页，音符高亮。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://book.verovio.org/
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2021-08-08
- **Last Updated**: 2025-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript

## README

# verovio

> verovio 是一个使用 c++编写得库，可编译成 python，js wasm 等多种语言得跨平台渲染乐谱库

本项目想解决得问题是：

- 1. 本地加载, 提升渲染速度。在移动端webview中加载乐谱，报证在 3 秒内成功渲染 （ ok ）
- 2. 通过musicxml方式加载乐谱，优化加载 （ ？ ）
- 3. 使用 midi 进行播放（ ok ）
- 4. 实时跳转，跳跃到到指定音符，音轨ticks也同样跳转（ ok ）
- 5. 标记音符，对指定音符头以及符干渲染颜色 （ ok ）

## 使用options

> [可用参数](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/adfc4281368be16f411e446dc57ea3d4fcd014f2/types/verovio/VerovioOptions.d.ts)

```js
var vrvToolkit = new verovio.toolkit();
var _xmlStringMei =
  "https://www.verovio.org/examples/downloads/Schubert_Lindenbaum.mei";

fetch(_xmlStringMei)
  .then((response) => response.text())
  .then((meiXML) => {
    var [new_data, new_svg] = render_mei(meiXML);
    var log = vrvToolkit.getLog();
    document.getElementById("layers").innerHTML = new_svg;
  });
vrvToolkit.setOptions(options);
vrvToolkit.getOptions(options);
```

```js
svg = vrvToolkit.loadData(xmlStringData, { inputFrom: "mei" });
svg = vrvToolkit.renderToSVG(this.page, {});
//loadData + renderToSVG 等同于 renderData()
svg = vrvToolkit.renderData(xmlStringData, options);
```

## Mei 格式转换

- 1. Mei 与 musicxml 格式得转换 ， verovio 参数：`vrvToolkit.renderData(meiXML, { inputFrom: "xml" })`
- 2. Mei 与 musicxml 格式得转换 , [ireal-musicxml](https://github.com/infojunkie/ireal-musicxml)
- 3. Mei 格式与其他格式得转换 [meico](<[meico](https://github.com/cemfi/meico)>)

## 在浏览器中呈现 mei 文件 [CETEI](https://github.com/TEIC/CETEIcean)

> CETEIcean 是一个 Javascript 库，它允许 TEI 文档在 Web 浏览器中显示，而无需先将它们转换为 HTML。它使用新兴的 Web Components 标准，尤其是 Custom Elements。它的工作原理是动态加载 TEI 文件，重命名元素以遵循自定义元素约定，并将它们注册到浏览器。支持 Web Components 的浏览器将使用它们向 TEI 元素添加适当的显示和行为；其他浏览器将使用回退方法来实现相同的结果。
>
> mei 格式得文件也可以使用 xml 后缀， 区分 musicxml 和 mei 格式主要依靠文件中得内容

```js
  <!-- <script src="./lib/CETEI.js"></script> -->

var CETEIcean = new CETEI();
CETEIcean.getHTML5("../data/a-mei-example.xml", function(data) {
  document.getElementById("TEI").appendChild(data);
});
```

## [Mei 文件规范](https://music-encoding.org/guidelines/v4/attribute-classes/att.octave.html)

oct: Attributes that record written octave.

### 参考项目

- [reductive_analysis_app](https://github.com/DCMLab/reductive_analysis_app)
- [reductive_analysis_app 在线 demo](https://dcmlab.github.io/reductive_analysis_app/index.html)
- [midi 播放跳转, 项目](verovio-tutorial-gh-pages)

- https://www.verovio.org/mei-viewer.xhtml
- 源码：https://www.verovio.org/mei-viewer.xhtml?musicxml=true&local=true 

## SVG 相关问题

- [SVGAnimatedString.animVal](https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedString/animVal)
- [animVal & baseVal ](https://stackoverflow.com/questions/5887911/svg-when-to-use-animval-baseval)