abcjs でサイト上に楽譜を♪

Webで簡易作曲

Webサイト上に楽譜を書いたりそれを演奏できたりする abcjs というのを試してみたところ、なかなかよくできていたので紹介したいと思います。

abcjs は、米国バージニア州の Paul Rosen さんという方が GitHub で公開されている javascript のライブラリ。楽曲の譜面情報を文字列で書き表すための「ABC記譜法」というのがありまして、そのルールで書かれた内容を元に楽譜を自動生成してくれるスグレモノです。

MathJax を使ったことのある方なら、あれの楽譜版みたいなもの、といえばスゴさがお分かりいただけるかも？　なにはともあれ、使ってみましょう。

abcjs はこんな感じ

↓このABC記譜テキストを編集すると下の楽譜に反映されます。
%%scale 0.6 %%score O1 O2 %%MIDI program 18 T:小フーガ ト短調 (loop ver.) C:Arranged by miyu S:Fugue in G minor BWV578 by Johann Sebastian Bach M:4/4 L:1/16 Q:1/4=64 K:Gm V:O1 clef=treble transpose=12 name="Organ 1" snm="O1" V:O2 clef=treble transpose=0 name="Organ 2" snm="O2" % 1 [V:O1] G4d4B6 A2 | G2B2A2G2 ^F2A2D4 | G2D2A2D2 B2AG A2D2 | w:あ な た は La La La La La La La [V:O2] G4d4B2D2=E2^F2 | G4 D4 A,2D2A2c2 | B4 c4 d2cB c4 | % 4 [V:O1] G2DG A2DA B2AG ADdc | BAGB AG^FA GDGA Bcd=e | f=edf ed^ce d2A2d2e2 | [V:O2] B4 c4 d2cB c4 | d8 D8 | D4 A4 F6 =E2 | w: ******** あ な た の % 7 [V:O1] fgfg a/>g/f/g/ a/g/f/g/ agab agf=e | faga ^caga daga caga | fd^cd gdcd adcd gdcd | [V:O2] D2F2=E2D2 ^C2E2 A,4 | D2A,2 =E2A,2 F2ED E2A,2 | D2A,D =E2A,E F2ED EA,AG | w: Na Na Na Na Na Na Na %10 [V:O1] A2f2G2=e2 F2A2d2f2 | =e2a2 z2e2 d2g2 z2d2 | cBcd caga Bg^fg Af=ef :|] [V:O2] F=EDF ED^CE DA,DE FGA=B | cBcd cBAc BABc BAGB | A2G2^F2D2 G,D,B,C DAGA :|]

 

↑演奏バーもつけられるのですが、スマホだと完全に表示されるまでに時間がかかるのと、再生ボタンを押してもすぐには演奏が始まらない時があります(T_T)　Firefox や Chrome 系の最新ブラウザでは再生確認できましたが、IE11 は NG のようです。

 

 

はじめの一歩

まずは コチラ からダウンロード。「abcjs-midi.css」と「bin/abcjs_midi_5.x.x-min.js」があればとりま十分ですので、それを Web サーバ上に配置したら

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="(配置先)/abcjs-midi.css" media="all" type="text/css" />
<script type="text/javascript" src="(配置先)/abcjs_midi_5.x.x-min.js"></script>

こんな感じのを HTML 内に書けば準備完了です。色んな使い方があるみたいなので、詳しいことは ドキュメント や abcjs configulator 等を参照していただくとしまして、単純に先程御覧頂いたようなことがやりたいだけなら

new ABCJS.Editor(
    'editor', {                    // テキストエリアの DOM の ID
        'paper_id': 'paper', 　　　// 楽譜を書かせたい DOM の ID
        'generate_midi': true,
        'midi_id': 'midi', 　　　　// 演奏UIを置く DOM の ID
        'generate_warnings': true,
        'warnings_id': 'warnings'  // エラー情報を表示したい DOM の ID
    }
);

こんな javascript を書くだけでできちゃいます。

ABC記譜法については「The abc music standard 2.1」や、まりんきょ さんの翻訳による「abc 記譜法」に詳しく書かれていますので参考にどうぞ！