はじめに
ABC記法を使って楽譜を表示できるライブラリ「Abcjs」を使用して、テキストベースで楽譜を管理・表示する方法をご紹介します。
Abcjsとは
Abcjsは、ABC記法で書かれたテキストを楽譜として表示するためのJavaScriptライブラリです。
ABC記法は、テキストベースの音楽記譜法で、シンプルな文法で楽譜を表現できます。
例えば、以下のようなコードでCメジャースケールを表示できます。
<Music code="CDEFGAB" />;
Abcjsの導入
Reactで使用する場合、以下のようなシンプルなコンポーネントを作成するだけで実装できます。
import abcjs from "abcjs";
import { useEffect, useId } from "react";
type Props = {
code: string;
};
const Music = ({ code }: Props) => {
const id = useId();
useEffect(() => {
abcjs.renderAbc(id, code);
}, [id, code]);
return <div id={id} />;
};
export default Music;
このコンポーネントを使用することで、より複雑な楽譜も表示できます。
<Music
code={`X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|"Em"EBBA B2 EB|\
~B2 AB dBAG|\
"D"FDAD BDAD|\
FDAD dAFD|
"Em"EBBA B2 EB|\
B2 AB defg|\
"D"afe^c dBAF|\
"Em"DEFD E2:|
|:gf|"Em"eB B2 efge|\
eB B2 gedB|\
"D"A2 FA DAFA|\
A2 FA defg|
"Em"eB B2 eBgB|\
eB B2 defg|\
"D"afe^c dBAF|\
"Em"DEFD E2:|`}
/>
ABC記法について
ABC記法の基本的な文法を説明します。
ヘッダー情報
楽譜のメタ情報は以下のように指定します。
X: 1 (参照番号)
T: 曲のタイトル
C: 作曲者
Q: 120 (テンポ)
M: 4/4 (拍子)
L: 1/8 (音符の長さ)
R: reel (リズム)
K: Emin (キー)
音の表現方法
音の高さは以下のように表現します。
- 基本的な音階：
C D E F G A B c d e f g a b - オクターブ変更：
C, D, E, F, G, A, B,(低い)、c' d' e' f' g' a' b'(高い) - 臨時記号：
^C ^D ^E ^F ^G ^A ^B(シャープ)、_C _D _E _F _G _A _B(フラット)
休符
休符はzまたはZで表現します。数字を付けることで長さを指定できます。
zZ4
実際の使用例を見てみましょう。
<Music
code={dedent`
X: 1
T: いろんな記号を試した楽譜
C: kazuki.F
Q: 120
M: 4/4
L: 1/8
R: reel
K: Emin
|C D F G A B|c d e f g a b|
|C, D, E, F, G, A, B,|c' d' e' f' g' a' b'|
|^C ^D ^E ^F ^G ^A ^B|_C _D _E _F _G _A _B|
|zZ4|
|a-a|a-c|
|.a ~a Ha La Ma Oa Pa Sa Ta ua va|
|!D.S.!a !fff!a|
|[CEGc] [ce] [df]|
|"C"[CEGc]|"Am7"|
|F G A B|
w:a i u e
`}
/>
参考文献
GitHubで編集を提案
Discussion