日記に楽譜を表示できるようにした。
この日記ははてな記法で書いてるので、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
- トップ
-
tech
-
日記に楽譜を表示できるようにした。