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

スポンサーリンク

ウェブサイトに楽譜を表示できる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
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 and traditional music.

ABC notationのチュートリアル(Internet Archive)

403 Forbidden
タイトルとURLをコピーしました