ウェブサイトに楽譜を表示できるabcjsを試してみました。ウェブサイトがワードプレスの場合、ABC Notationというプラグインを追加するだけで楽譜が表示できます。
abcjsの準備
ワードプレスのプラグイン新規追加で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
javascript for rendering abc music notation. Contribute to paulrosen/abcjs development by creating an account on GitHub.
ショートコードにengraver=”{ responsive: ‘resize’ }”と設定すると、表示がレスポンシブになるはずなのだけど、なぜかレスポンシブにならない様子。ショートコードがabcjsの時は、engraver=”{ responsive: ‘resize’ }を付けると楽譜の表示がレスポンシブになります。ショートコードがabcjs-audioだとレスポンシブにならない様子。
ABC Notationの書き方
ABC Notationの詳しい書き方については、http://abcnotation.com/に説明があります
ABC Notationのサイト(Internet Archive)
abc | home
This is the home page at abcnotation.com. abc is a text based format for music notation, particularly popular for folk a...
ABC notationのチュートリアル(Internet Archive)
Steve Mansfield's Abc music tutorial
LeSession website by Steve Mansfield. abc music notation tutorial, the uk.music.folk newsgroup FAQ, and other abc utitit...