2018年 05月 25日

日記に楽譜を表示できるようにした。

tech

日記に楽譜を表示できるようにした。

この日記ははてな記法で書いてるので、super pre 記法でABC記譜法を書くと、該当箇所を abcjs でレンダリングしなおすという実装にした。

MathJax のようにサーバサイドでSVG変換して埋め込むようにしたいけど、すぐできることではなくて面倒なので、今のところクライアントサイドでやっている。

abcjs のデモページで書いてからコピペするのがよさそう。意外と対応してない記法とかもある。

abcjs で大譜表

以下のようにするとピアノ用の大譜表にできる。

M:4/4
L:1/4
K:C
K:
%%staves {1 2}
V:1 treble
!1!CDEF | EDCz | EFGA | GFEz
V:2 bass
!5!!1![G,C,]2 [G,C,]2 | [G,C,]2 [G,C,]2 | [G,C,]2 [G,C,]2  [G,C,]2 [G,C,]2

こんな感じにする。 V:1 treble と V:2 bass でそれぞれト音記号・ヘ音記号になる。%%staves {1 2} で2つをまとめる。

指番号は !0! のように指定できる。けど abcjs だとあんまり見やすくないかな。

M:4/4
L:1/4
K:C
K:
%%staves {1 2}
V:1 treble
!1!CDEF | EDCz | EFGA | GFEz
V:2 bass
!5!!1![G,C,]2 [G,C,]2 | [G,C,]2 [G,C,]2 | [G,C,]2 [G,C,]2  [G,C,]2 [G,C,]2

関連エントリー