Ohhnews

分类导航

$ cd ..
foojay原文

介绍Sheetmusic4J：一个用于渲染和交互乐谱的Java(FX)库

#sheetmusic4j#javafx#musicxml#乐谱渲染#交互式播放

我正在和儿子一起构建 MelodyMatrix，这是一个可以查看并跟着音乐演奏的应用。该应用已经能够以不同视图显示歌曲：掉落方块、和弦、吉他视图等。现在我们想要添加一个“学习”板块，一个能帮助用户通过跟随实际乐谱练习钢琴的视图，同时乐谱会随着演奏移动。

[LOADING...]

静态的 PDF 乐谱无法实现这一点。JavaFX 有很棒的 PDF 查看器组件，但 PDF 与正在播放的内容毫无关联。没有东西高亮当前音符，没有东西标记歌曲中的当前位置。我曾寻找一个 JavaFX 库来渲染乐谱，并允许代码与之交互（跳转到某个位置、高亮音符、跟随播放），但没有找到，所以我亲自构建了一个。

查看内嵌内容

与 Lottie4J 相同的方法

这个问题与我之前解决过的一个问题类似。在构建 Lottie4J 时，我遇到了同样的空白：浏览器和移动端有成熟的动画播放器，但 JavaFX 没有。Sheetmusic4J 遵循相同的路径：一边是开放文件格式，另一边是 JavaFX 渲染组件，而 AI 在实现工作中承担了很大一部分。

需要说明的是，这不是“氛围编码”。我定义任务，描述我想要实现的目标，审查返回的结果，然后迭代。没有这种协作，这个库不可能这么快完成，但方向和决策权始终在我手中。

基于 MusicXML 构建

Sheetmusic4J 读取 MusicXML，这是一个用于表示乐谱的开放标准。MIDI 存储音符和时序，而 MusicXML 存储的内容更多：乐谱的结构、在页面上的外观、带有歌手歌曲的旋律线下的歌词。MusicXML 还附带了一套官方的示例文件，我用它们来比较 Sheetmusic4J 渲染的结果与每个文件的参考 PDF。

记谱本身遵循音乐字体的 SMuFL 标准。Sheetmusic4J 目前使用 Bravura 字体进行渲染。我还没有实现字体切换功能，这还在待办清单上，但 SMuFL 使得未来支持其他记谱字体成为可能。

[LOADING...]

上图直接来自这个库，它将 MusicXML 术语映射到 Java 模型中的类名以及内部使用的布局术语。我不是音乐家（尽管多年前在音乐学校待过多年），所以我首先为自己构建了这个参考。这也给任何提交问题的人提供了一个共享的词汇表，可以精确指向出问题的元素。请查看 GitHub 上的 NOTATION_ELEMENTS.md 文件，获取更多信息以及一个展示 MusicXML 元素与库代码中如何使用它们之间联系的表格。

Open Sheet Music Display 已经在浏览器中渲染 MusicXML，并在此处作为参考，就像官方 Lottie 网页播放器对 Lottie4J 所做的那样。WebView 可以在 MelodyMatrix 内部显示同样的结果，但 WebView 无法让我从 JavaFX 代码与渲染引擎通信。Sheetmusic4J 做到了：它提供了移动标记、高亮音符以及从 MIDI 流驱动视图的接口，这正是 MelodyMatrix 将钢琴演奏与乐谱同步所需的。

四个仓库，一个库

所有内容都托管在 GitHub 的 sheetmusic4j 组织下，库项目 的结构与 Lottie4J 类似：

  • Core：读取和写入 MusicXML 和 MIDI 文件。
  • Engraver：将原始数据转换为乐谱的布局，不依赖 JavaFX。
  • FX Viewer：应用程序用来显示乐谱的 JavaFX 组件，包括全页乐谱视图和水平条状视图。
  • Demo：其他三个模块的测试应用程序。

[LOADING...]

演示应用以并排两种方式渲染同一个 MusicXML 文件：静态 PDF（使用 Derek Lemmerman 的 PDF 查看器组件）与 Sheetmusic4J FX Viewer。PDF 固定在其页面尺寸上。FX Viewer 在窗口调整大小时会重新排列布局，有时会导致行与 PDF 的显示略有不同。演示还包括模拟播放和高亮音符的工具（没有声音），纯粹用于测试视觉同步。一个差异选项卡将 FX Viewer 的输出与参考 PDF 逐像素比较。它能显示出实际差异，不过我还在评估这种比较有多大用处，因为静态 PDF 和交互式查看器解决的是不同的问题。

使用该库

将 FX Viewer 依赖添加到 JavaFX 项目中：

<dependency>
    <groupId>com.sheetmusic4j</groupId>
    <artifactId>fxviewer</artifactId>
    <version>0.0.1</version>
</dependency>

用几行代码将 MusicXML 文件加载到乐谱视图中：

Score score = ScoreFile.load("path/to/song.musicxml");

SheetView sheetView = new SheetView();
sheetView.setScore(score);

stage.setScene(new Scene(new ScrollPane(sheetView), 900, 600));
stage.show();

FX Viewer 模块还提供了一个 StripView，用于同一乐谱的水平滚动布局。

版本 0.0.1 及后续计划

这个首次发布版本号为 0.0.1，并不是稳定版本。API 和渲染方式都可能发生很大变化。接下来，MelodyMatrix 的“学习”板块驱动了大部分需求：在乐谱上跟随标记、高亮当前演奏的音符、使视图与真实钢琴的 MIDI 输入保持同步。

如果你尝试后发现渲染差异，请在 GitHub 仓库 中提交一个 issue，附上 MusicXML 文件和你预期与实际的截图。正是这类报告推动了 Lottie4J 的快速进步，我相信这里也会同样有效。请查看 sheetmusic4j.com 上的代码、文档和演示应用。通过 Maven 使用依赖项，或 fork 该仓库，并告诉我你用它能构建什么。

本文 详细介绍 Sheetmusic4J，一个用于渲染和交互乐谱的 Java(FX) 库 最初发布在 foojay 上。