概要
abc.js はブラウザ上に楽譜を描画することができるライブラリです
楽譜の描画に必要な情報を渡すと SVG 形式で楽譜を描画してくれます
環境
- CentOS 6.7 64bit
- Apache httpd 2.2.15
- Firefox 43.0.4
- abc.js 2.3
abc.js のインストール
インストールは簡単です
必要な js ファイルを適当な場所に配置すれば OK です
今回は既存のサイトの <pre> 情報から楽譜を作成するプラグイン方式と、abc.js のメソッドをコールすることで楽譜を描画するベーシック方式の 2 種類で楽譜を作成してみました
abcjs_plugin を使ったサンプルコード
まずはプラグイン方式を使った方式を紹介します
- cd /var/www/html/abcjs
wget https://raw.github.com/paulrosen/abcjs/master/bin/abcjs_plugin_2.3-min.js- vim plugin_sample.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="abcjs_plugin_2.3-min.js" type="text/javascript"></script>
<body>
<pre>
X: 1
T: Musikalisches Opfer (BWV 1079)
T: No. 3 Canones diversi (Realisation)
C: J. S. Bach
K: Eb
V: 1
C4E4|G4A4|=B,4z2G2-|G2^F4=F2-|=F2=E4_E2-|_E2=D2_D2C2|
V: 2
C2E2G2c2|=Bcde fedc|dGdf edc=B|=A=Bce dc=B=A|GAB_d cBAG|FGAB AGFE|
V: 1
=B,2G,2C2F2|E4D4|C4E4|GFGc GEDE|FG=A=B cEFG|ADEF GFED|
V: 2
DEFG FEDA|GFEc =B=AGF|EDEG cGFG|E4C4|D4E4|F2C2G,2=B,2|
V: 1
EFGA BAGF|GABc _dBAG|=A=Bcd ec=B=A|=Bcde fdGd|cdef edc=B|c2G2E2C2:|
V: 2
C2_D2=D2_E2|-_E2=E4=F2|-=F2^F4G2|-G2z2=B,4|A4G4|E4C4:|
</pre>
</body>
</html>
これで http://localhost/abcjs/plugin_sample.html にアクセスすると楽譜の元データと楽譜の SVG 画像が表示されるとおもいます
プラグイン方式の場合は <pre> タグの中に <div> タグで SVG 情報を描画するので、既存の楽譜情報を削除することができません
( 別途、JavaScript を使えばできると思いますが )
もしすでに楽譜情報が HTML として存在しているなら、この方式を使ったほうが簡単ではあります
abcjs_basic を使ったサンプルコード
では、次に楽譜情報を作成する関数をコールすることで楽譜を描画してみたいと思います
- cd /var/www/html/abcjs
wget https://raw.github.com/paulrosen/abcjs/master/bin/abcjs_basic_2.3-min.js- vim basic_sample.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="abcjs_basic_2.3-min.js" type="text/javascript"></script>
<script src="myabc.js" type="text/javascript"></script>
<body onload="ABCJS.renderAbc('notation', score); return false;">
<div id="notation"></div>
</body>
</html>
var number_of_tunes = "1";
var title = "score_title";
var measure = "4/4";
var long = "1/4";
var rhythm = "";
var major_key = "";
var score = '\
X: ' + number_of_tunes + '\n\
T: ' + title + '\n\
M: ' + measure + '\n\
L: ' + long + '\n\
R: ' + rhythm + '\n\
K: ' + major_key + '\n\
C D E F|G A B c|C D E F|G A B c\n\
'
せっかくなので全く同じ楽譜ではなく自分で楽譜の情報を与えてみました
とは言ったも「ドレミファソラシド」を描画しているだけです
また、JavaScript と HTML を分けて、楽譜情報を JavaScript ファイルで管理するようにしています
ABCJS.renderAbc に描画する div タグの id 情報と描画する楽譜の文字列情報を渡せば OK です
コード中に各パラメータの説明を簡単に記載しています
自分は楽譜を読むことはできないので、解釈を間違っているパラメータがあるかもしれないのでご了承ください
ドレミファソラシドは英語で「CDEFGABc」に対応しているのでその情報を与えています
これで http://localhost/abcjs/basic_sample.html にアクセスすると楽譜の SVG 画像が表示されるとおもいます
先ほど違って楽譜の元情報は描画されないと思います
最後に
とりあえず楽譜を描画することはできました
触っていて一番気になったのはドキュメントが非常に少ないことです
公式サイトにもちゃんとしたドキュメントがなく、楽譜を描画する際に与えるパラメータ情報が見つからず「X:」とか「L:」とかが一体何を表しているのかさっぱりわかりませんでした
なのでソースコードを Github からダウンロードして特定のキーワードで grep をかけることでパラメータをパースしている実装部分を探して何を表しているパラメータなのか判断しながら試しました
$ grep -r --exclude=jquery-1.11.3.min.js --exclude-dir bin/ 'R:' * | grep -v 'PER:'
結構たくさん指定できるパラメータがあって、ちゃんとこれらを使って楽譜を作成しようとしたら、楽譜を書く力もないと結構大変かもしれません
- parse/abc_parse_header.js
var metaTextHeaders = {
A: 'author',
B: 'book',
C: 'composer',
D: 'discography',
F: 'url',
G: 'group',
I: 'instruction',
N: 'notes',
O: 'origin',
R: 'rhythm',
S: 'source',
W: 'unalignedWords',
Z: 'transcription'
};
