LoginSignup
47

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-14

この記事は 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を別途読み込む必要があります。

もう少し凝った使い方

楽譜の見栄えを調整する

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

paramsで指定する

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

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

CSSでスタイルを適用する

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

五線を赤くする例 (Codesandbox)

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

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

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

まとめ

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

関連情報

abcjsに関する情報

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によるテキストベース楽譜を融合した強力な拡張機能ですので、ぜひ利用してみてください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47