ブラウザで楽譜を書けるライブラリ abcjs のご紹介

この記事は CyberAgent 19新卒 エンジニア Advent Calendar 2018 14日目の記事です。

この記事について

ブラウザで簡単に楽譜を書ける便利なライブラリ abcjs を紹介します。ニッチな話題ですが、

• 自身の修士研究で利用しており、細かく触る機会が多い
• 有用なライブラリなのに、Qiita記事がほとんど無い

という理由で紹介記事を書くことにしました。

対象読者

• 楽譜を使う人
• abcjsを使ったことがない人
• ABC記譜法を知らない人

abcjsについて

abcjsはABC記譜法(以下ABC)を使ってWeb上に楽譜を書けるJavaScriptライブラリです。 @paulrosen氏によるオープンソースプロジェクトで、MITライセンスのため様々な場所で使うことができます。また現在もアクティブに開発されており、頻繁に新機能の追加やアップデートが行われています。

ABCは「C」と書くと「ド」になるシンプル記法で、複雑なレイアウトや大規模なスコアの記述は苦手ですが、だいたいの楽譜はABCで十分書けます。

できること

• HTMLに楽譜を埋め込む
  

• テキストベースでサクサク楽譜を書く
  

• 楽譜のMIDIを再生する
  

インストール

$ npm i abcjs

読み込み

import abcjs from "abcjs";

scriptタグで読み込めるURLも用意されています

基本的な使い方

「ドレミ」の楽譜を描画してみます。「ドレミ」はABCで「cde」と書きます。

使用API

abcjs.renderAbc(${楽譜描画先要素のID}, ${ABC});

サンプルコード

Codesandbox

もう少し真剣に楽譜を書いてみる

Information Fieldの書き方

ABC本文の前に、タイトルや作曲者といったメタデータ (Information Field) を記述できます。

タイトル:T

T:My Song

作曲者:C

T:My Song
C:stkay

基準の音価を変える:L

ABCでは何も指定しない限り、音符は8分音符(1/8)を基準として入力されます。この基準となる音価を変更する場合は、Lフィールドを設定します。

T:My Song
C:stkay
L:1/4
CCCC

調号を変える:K

T:My Song
C:stkay
L:1/4
K:G
CCCC

拍子記号を変える:M

T:My Song
C:stkay
L:1/4
K:G
M:1/2
CC

いろいろなABCの書き方

音価を変える

音価を変更する場合は、基準音価の倍数で指定します。

T:My Song
C:stkay
L:1/4
C1/4 C1/2 C C2 C3 C4

小節線を書く

|が小節線になります。

T:My Song
C:stkay
L:1/4
M:4/4
CCCC | CCCC |

はたを区切る

テキストにスペースを入れると音符のはたを区切ることができます。

T:My Song
Cstkay
M:4/4
C C CC CCCC

その他詳細な記法についてはABC記譜法公式wikiをご覧ください。

リアルタイム楽譜編集

abcjs editor を利用すると、ブラウザ上でリアルタイムに楽譜入力できます。

使用API

new abcjs.Editor(${テキストエリアのID}, {paper_id: ${楽譜描画先要素のID})

サンプルコード

Codesandbox

楽譜のMIDIを再生する

abcjsでは作成した楽譜をMIDIとして再生することができます。

使用API

abcjs.renderMidi(${シークバー描画先要素のID}, ${ABC})

サンプルコード

Codesandbox

準備

ライブラリのインポート元を変更

import abcjs from "abcjs/midi";

MIDI機能を利用する場合はインポート元が変わるので注意！

シークバーが利用するfont-awesome / CSSのロード

MIDI再生時にabcjsがシークバーを描画してくれますが、そこで使われているfont-awesome / CSSを別途読み込む必要があります。

• <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">をHTMLに追加
• https://raw.github.com/paulrosen/abcjs/master/abcjs-midi.css をリポジトリ内のCSSファイルにコピーする

もう少し凝った使い方

楽譜の見栄えを調整する

renderAbcに渡すparamsで指定する方法と、描画されるSVGにCSSで直接スタイルを適用する2つの方法があります。

paramsで指定する

abcjs.renderAbc(${楽譜描画先要素のID}, ${ABC}, ${params});
第3引数に渡すオブジェクトparamsで楽譜の見栄えやレイアウト等に関するパラメータを指定できます。

スケールを変更してみる例 (Codesandbox)

CSSでスタイルを適用する

params内でadd_classesを有効にしていると、特定のパスにスタイルを適用できます。

五線を赤くする例 (Codesandbox)

音符にクリックリスナを登録する

paramsのclickListenerに、音符に対するクリックリスナを登録することができます。

音符をクリックするとalertする例 (Codesandbox)

まとめ

　以上がabcjsの基本的な使い方になります。質問があれば本記事のコメント欄や、筆者のtwitterにお気軽にドゾー。

関連情報

abcjsに関する情報

• 公式APIドキュメント
  
• abcjs Configurator
  • APIで設定できる各種パラメータをインタラクティブにプレビューできるサイト
• abcjs demo page
  • abcjs Editorを試せるサイト

ABCに関する情報

• 公式マニュアル (v2.2)
  • ページ内検索して記法を調べるのに利用します。(例えば臨時記号の記法を調べたい場合は「accidental」で検索)
  • 音楽用語の英訳が分からないと使いづらいかもしれません。
• まりんきょ氏の日本語訳マニュアル (v2.1)
  • ↑の公式マニュアルの日本語訳です(最新ではありません)
• Yahoo Groups
  • ABCのメーリングリスト
  • ABCの文法や、ソフトウェアの使い方に関する質問が日々投稿されています
• abc software packages
  • ABCを扱える各プラットフォーム上のソフトウェアのリスト

ABC譜例

• tune search
  • ABC譜を検索できます。IMSLP等に比べるとレパートリーは少ないかもしれません。 　　

宣伝

scrapbox.io上で楽譜をサクサク書けるChrome拡張 hyperscorebox を修士研究の一環として開発しています。Scrapboxのリンク機能とABCによるテキストベース楽譜を融合した強力な拡張機能ですので、ぜひ利用してみてください。