この記事は 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})
サンプルコード
楽譜のMIDIを再生する
abcjsでは作成した楽譜をMIDIとして再生することができます。
使用API
abcjs.renderMidi(${シークバー描画先要素のID}, ${ABC})
サンプルコード
準備
ライブラリのインポート元を変更
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によるテキストベース楽譜を融合した強力な拡張機能ですので、ぜひ利用してみてください。