Web上で楽譜を表示できるライブラリたちはたくさんあります。 仕事上、そういうものたちとかかわる機会がありましたので、ここで一度まとめたいと思い記事を書きました。 (全てを使ってみたというわけではないです、悪しからず。)

alphaTab

https://github.com/CoderLine/alphaTab

表示の上では最高にいいと思います。 パートが複数ある場合でも表示可能です。 進捗に合わせてバーを動かすことができます。

ただし、一般的な楽譜形式 Music XML をサポートしていないのが難点です。 GitHub では開発中みたいです。

対応している形式は次の3パターンです。

Guitar Pro 3-5 (gp3,gp4,gp5) – Those files are widely available in the internet. They are created using earlier versions of Guitar Pro (version 3 to 5).
Guitar Pro 6 (gpx) – This is the newest file format created by Arobas, the creators of Guitar Pro.
AlphaTex – AlphaTex is a text based format for writing music notation. It was created for alphaTab to allow people easy writing and storing of music notation.

Guitar Pro は有料ソフトウェアです。

これに関連したプロジェクトとして、 alphaSynth などがあります。

VexFlow

https://github.com/0xfe/vexflow

ギターのタブ符も扱えます。

バーを動かすというより、音符を動かすサンプルがありました。

MusicXML などの形式で読み込むというより、 音を記述すると表示してくれるというライブラリです。

OpenSheetMusicDisplay

https://github.com/opensheetmusicdisplay/opensheetmusicdisplay

こちらは VexFlow を用いて Music XML を表示するライブラリです。 なので、楽譜作成ソフトで作成した楽譜ファイルをそのまま表示することができます。

複数パートでも表示可能です。

Verovio

http://www.verovio.org/index.xhtml

こいつはすさまじいです。 オンラインで楽譜編集までできます。

MusicXML そのものは扱えませんが、 コンバートして使うことができるみたいです。

スポンサーたくさんですね。 お金かかっています。

abcjs

https://github.com/paulrosen/abcjs

その昔私が楽譜の書ける掲示板を作ったときに使っていたものです。 ABC記法で書かれた楽譜を表示できます。

一般的に 音楽家の間でABC記法は使われていないみたいです。

abcweb

https://wim.vree.org/js/

MusicXML 及び ABC記法 の楽譜を表示できるライブラリ。

scorejs

https://github.com/danigb/scorejs

javascript で楽譜を表示できるものです。

Neon.js

http://ddmal.music.mcgill.ca/neon

ネウマ符などの楽譜編集・表示に使えるライブラリ。
これまで紹介したライブラリとは表示対象が異なります。楽譜ではあるのですが。

GUIDO

http://www.noteserver.org/salieri/nview/embed_web.html

使うにはちょっと心配なところがありますが、 Javascript で楽譜の書けるライブラリです。

ngx-score (停止中)

https://bohoffi.github.io/ngx-score/home

現在停止しているプロジェクトです。
楽譜表示ができます。

さいごに

目的に応じてなにを使うかですが、一般の5線譜を使うなら alphaTab, Verovio がいいと思います。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.