ウェブサイトに楽譜を表示できるabcjsを試してみました。ウェブサイトがワードプレスの場合、ABC Notationというプラグインを追加するだけで楽譜が表示できます。
abcjsの準備
ワードプレスのプラグイン新規追加でABC Notationを検索してインストールします。プラグインを有効化する以外、特に設定は必要ありません。

ABC Notation
https://wordpress.paulrosen.net/plugins/abc-notation/
abcjsの使い方
abcjsは、ABC notationと呼ばれる記譜法をSVGに変換してウェブサイトに表示してくれます。例えば、次のようなコードをウェブサイトに埋め込むと、
[abcjs-audio engraver="{responsive:'resize'}"]
X:1
T:カエルのうた
M:4/4
L:1/4
Q:1/4=100
K:C
|CDEF | EDCz| EFGA | GFEz |
| CzCz | CzCz | C/2C/2D/2D/2 E/2E/2F/2F/2 | EDCz||
[/abcjs-audio]
ブラウザでは楽譜として表示されます。
コードの各行は、意味は次のような意味があります。
X | 曲の数 |
T | 曲のタイトル |
M | 拍子 |
L | デフォルトの音符の長さ |
Q | テンポ |
K | キー |
- 小節は、バー(|)で区切る。
- 音階は、ABCDEFGで表す。
- 休符はz。
- C3のドをCと書いて、オクターブ上は小文字のcで表す。
- 音符の長さは、音階の後に数値を付加して表す。数値は、Lで指定したデフォルトの長さを基準に表す。デフォルトが4分音符(1/4)の場合、8分音符は1/2で表し 、2分音符は2倍で表す。
- 音符間にスペースを入れると連桁を切ることができる。
メジャーとマイナーを変換できる
なんと、キーの設定をK:CからK:Cmに変更するだけで、自動的にCメジャーからCマイナーの楽譜になります。すごい!!
MIDIで演奏もできます。ただし、以下の説明によると、MIDI演奏はIEやEdgeでは動かないようです。
GitHub - paulrosen/abcjs: javascript for rendering abc music notation
javascriptforrenderingabcmusicnotation.Contributetopaulrosen/abcjsdevelopmentbycreatinganaccountonGitHub.
ショートコードにengraver=”{ responsive: ‘resize’ }”と設定すると、表示がレスポンシブになるはずなのだけど、なぜかレスポンシブにならない様子。ショートコードがabcjsの時は、engraver=”{ responsive: ‘resize’ }を付けると楽譜の表示がレスポンシブになります。ショートコードがabcjs-audioだとレスポンシブにならない様子。
ABC Notationの書き方
ABC Notationの詳しい書き方については、http://abcnotation.com/に説明があります
ABC Notationのサイト(Internet Archive)
abc | home
Thisisthehomepageatabcnotation.com.abcisatextbasedformatformusicnotation,particularlypopularforfolkandtraditionalmusic.
ABC notationのチュートリアル(Internet Archive)
Steve Mansfield's Abc music tutorial
LeSessionwebsitebySteveMansfield.abcmusicnotationtutorial,theuk.music.folknewsgroupFAQ,andotherabcutititiesandtunefiles