Abc 转 SVG | CSS-Tricks

这里有一个小例子，Jeremy Keith 在他的演讲中使用过。它一直是我最喜欢的渐进增强和酷炫技术^TM 的例子之一。

存在一种名为 abc 的音乐记谱格式。他们不会大写它。有点像 npm，我认为这是有道理的，因为它不是一个缩写词。但它确实是一个事物的名称，所以它非常尴尬。 Ughakdhk。无论如何。

格式本身非常酷。它非常简单且基于文本。以下是其主页中的示例

X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
  GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
  g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|

有点像 YAML，我想。那是整首歌的音乐。它没有加载乐谱的所有可能性；它只是音符和节奏。足以传达民歌/传统歌曲，这主要也是它的用途。

你可能已经习惯了按原样阅读它，但我认为这不是它的真正用途。我猜这个格式更多的是关于

标准化（它是，并且里面有 570,000 首曲子，所以我想这奏效了）
文本（我敢打赌整个歌曲数据库出奇地小）
准备好被转换为任何东西

转换部分是最有趣的部分！您可以在 abc 格式的主页上看到它正在发生。

孤独的月光圆舞曲，存储在网站上的 abc 格式中，正在以 PNG 格式显示为乐谱，并且正在转换为可在网络上播放的音频格式。基本上是将 MIDI 转换为 MP3。

PNG 很好，但如果它是 SVG 会不会更好？当然会。

所有这些都与 Jeremy 有关，因为他有一个名为 The Session 的网站，该网站致力于爱尔兰音乐。他在网站上存储曲子，因此适当地使用 abc 格式。在 The Session 上，您可以点击乐谱按钮，它会将 abc 转换为 SVG 并显示出来。

SVG 转换完全由一个开源库在JavaScript 中实现。这就是渐进增强的部分。存储和发送基本格式，让浏览器增强体验（如果可以的话）。

就是这样。很酷。

The Session 实际使用的 JavaScript 库是 Paul Rosen 和 Gregory Dyke 的 abcjs。上面链接的另一个是 Jef Moine 的类似 abc2svg。

评论