万能的 JavaScript，向网页中插入五线谱（abc.js）

[toc]

JavaScript 和 Python

昨天晚上，刷知乎，突然看到一个问题，论证 Python 和 JavaScript 哪个更值得学。

结果下方大部分的答案不是推荐 JavaScript 就是都推荐学。这两个语言都是脚本语言，都有着粗暴简单的语法，都有着广泛的运行库，差不多的运行速度，对于初学者来说，很难区分它们谁优谁劣，除非有明确的用途。

这要看它们的生态。它们的第三方运行库都很多，非要比较的话，JavaScript 甚至会更多，不过很显然，两者的运行库有着明显的区别，JavaScript 更趋向于浏览器渲染方面，当然也有处理数组等等，不过也多用于 web 平台的程序，很少有人拿 JavaScript 作为一个自己私下使用的工具，但一旦做出来了，很容易分享。甚至这些库都不用安装，直接上传到 npm 或者传到 cdn 里然后告诉别人在 HTML 中写个 < script src = '.xxx.cdn.com/...' > 就行了，但想用 JavaScript，起码得会用 HTML。

而 Python 则更倾向于数据处理、机器学习、桌面 GUI ，数据采集等，门槛更低，能真正实现零基础入门，短时间学习就能上手做玩具。两者的本领是有重合，不过 Python 更接近于操作系统，所以限制较于 JavaScript 小太多了，能发挥 GPU 更多的性能资源。

两者都是很简单的语言，所以我的看法是都学一点，毕竟如果只是想让电脑帮自己做一些简单的事情，总不至于搬起 C++ 、Java 来跑吧。

起源

我妈最近报了个网课，学钢琴的，最近外面羊太多，所以在家避一阵子风头好好练。我看着那些简谱，突然灵机一动，想到 tex 里有显示钢琴五线谱的 tex 语法，那有没有 JavaScript 库可以解析某些代码生成五线谱呢？

果然有，abc.js （ https://www.abcjs.net/ ）。兴奋的我马上学习它的 demo，本来我认为这玩意只是印个图，但没想到打开他们的 demo 后，功能之强大简直惊艳我！

显示效果

https://editor.drawthedots.com/

居然如此强大，生成的图不是死板的图片，而是可以交互的，可以上拉下拽，可以点击某个音符发出声音，可以左边写代码，右边实时生成五线谱，还可以保存为 MIDI 和 WAV 格式，甚至加图片上的箭头注释、添加歌词..... 妥妥半个在线 FL studio 啊！

（当然，下面这个例子，只是最简单的，只生成一个图像......）

使用方式很简单，它的官方 js 使用教程在这里 ，https://paulrosen.github.io/abcjs/examples/toc.html （貌似得科学上网才能访问，还有那个播放音乐，也得科学上网才播放。否则是无声的）

使用方式

这里有个最简单的例子。

<div id="paper">抱歉，显示失败！</div>
<script src="https://img1.ccgxk.com/ccgxk-oss/js/abc.js" type="text/javascript"></script>
<script type="text/javascript">
        var abc = "T: Cooley's\n" +
            "M: 4/4\n" +
            "L: 1/8\n" +
            "R: reel\n" +
            "K: Emin\n" +
            "|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" +
            "EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n" +
            "|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" +
            "eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|";
        function load() {
            ABCJS.renderAbc("paper", abc);
        }
        load();
</script>

就是一个类，叫 ABCJS，调用它的 renderAbc 方法

ABCJS.renderAbc("显示容器的 ID 号","显示的内容")。

我也把它的 js 弄到我的 cdn 里了，它的大小妥妥 400+ kb 呢，也不是小工程的 JavaScript 运行库了。

<script src="https://img1.ccgxk.com/ccgxk-oss/js/abc.js" type="text/javascript"></script>

当然，它的使用绝对没怎么简单，除了这个 ABCJS 类的方法很多外，它的语法也需要去学。

关于它的名字

为什么这东西叫 ABCJS 而不是 piano 、music JS？因为它使用的音乐记谱语法可不是这两个程序员自创的，就是 ABC 记谱法。早在 1800 + 年就已经有了，只是后来计算机发明了，计算机需要发出音乐，科学家突然想到这个方法正好可以使用几十个 ASCII 码实现五线谱内容的记录了，进而帮助计算机记录音乐信息，固 ABC 记谱法又受到人们的重视了，成为一种文字符号记音乐谱子之法（好像也有其他的方法）。

对于 ABC 记谱法的学习，等我以后有时间了也学一下，这个 https://abcnotation.com/examples 地址里记载的比较详细。

随想

今天第一次打开这个 ABCJS 库，点击播放按钮，声音响起的那一刻！心里备受震撼，浏览器在之前的时代，除了播放视频和打开音乐站外会播放音乐外，其余时刻都是寂静无声的，而此时，浏览器就像一个八音盒一样，美好的音乐，随着指挥杆缓缓流过，别提多神奇了！

其实这个库还有一些需要改进的，这个库的年代过于久远，那时候 JavaScript 是很简单的，现在 JavaScript 里有 audio api，可以让浏览器自己发出 哆啦咪 的声音，而不必借助 cdn 里的音频链接，这样，就不用担心一些墙的抵挡了。不过它还可以调音色，如果使用 audio API 来实现不同音色外，可能也并不方便。

等玩 6 了，也做个 emlog 插件！当然，自己突然想起来自己也是个 音乐爱好者，这个工具真的大大提高我的激情。