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

スポンサーリンク

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

abcjsの準備

ワードプレスのプラグイン新規追加でABC Notationを検索してインストールする。プラグインを有効化する以外、特に設定は必要ない。

ABC Notation

Paul Rosen : ABC Notation WordPress Plugin

abcjsの使い方

abcjsは、ABC notationと呼ばれる記譜法をSVGに変換してウェブサイトに表示してくれる。例えば、次のようなコードをウェブサイトに埋め込むと、

ブラウザでは楽譜として表示される。

コードの各行は、意味は次のような意味がある。

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では動かないらしい。

paulrosen/abcjs
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/に説明があるはずなのだけれど、なせかアクセスできなくなっている。2019年10月くらいまではあったようなのに。
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)

Steve Mansfield's Abc music tutorial
LeSession website by Steve Mansfield. abc music notation tutorial, the uk.music.folk newsgroup FAQ, and other abc utitities and tune files
タイトルとURLをコピーしました