楽譜表示プラグインabcjsを試してみた

ウェブサイトに楽譜を表示できるabcjsを試してみました。ウェブサイトがワードプレスの場合、ABC Notationというプラグインを追加するだけで楽譜が表示できます。

abcjsの準備
abcjsの使い方
1. メジャーとマイナーを変換できる
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だとレスポンシブにならない様子。