プログラミング

【abcjs】TAB譜を表示する【スケール(音階)表示プログラム】

記事内に商品プロモーションを含んでいます。

前回の記事でダイアトニックスケール(一般的なドレミファソラシド。全音階)を Keyごとに切り替えられるプログラムを作ったわけですが、ギタリストとしてはやはり TAB譜表示もできるようにしたいところです。

ギタリストは楽譜に弱い傾向がありますからね(私も超弱いです)。
abcjsには TAB譜表示機能も付いていて、そんな譜面に弱い弦楽奏者に親切なライブラリです。
開発者の Paulrosen さん、ありがとうございます。

abcjsで譜面の表示ができてしまえば TAB譜の表示は簡単なのですが、いかんせん情報が少ないうえに公式チュートリアルどおりにやっても表示されなかったので苦労しました。

それではさっそく、TAB譜表示のやり方を見ていきましょう。

abcjsでTAB譜を表示する

まずは楽譜を表示する最低限の記述をします。

<div id="score"></div>
let scale = "\nCDEF GABc|\n";
ABCJS.renderAbc("score", scale);

これで下の画像のような「ドレミファソラシド」が表示されます。

abcjs で譜面を表示

次はこれに TAB譜を表示してみましょう。

ABCJS.renderAbc(); の第3引数に、例えば下記のように記述します。

let scale = "\nCDEF GABc|\n";

let tabScore = {
    tablature: [
      {
          instrument: 'guitar',
          tuning: ['E,', 'A,', 'D', 'G', 'B', 'e']
      }
    ]
}

ABCJS.renderAbc("score", scale, tabScore);

abcjs でTAB譜を表示

これでギターのTAB譜を表示できました。超便利!!

TAB譜表示のオプション

上記だけでもシンプルなギター用のTAB譜が表示できてありがたすぎますが、他にも便利な機能があるのでご紹介します。

鋭意制作中

さいごに:不満点

さいごに少し不満点を。

ギターなどの弦楽器はピアノや管楽器などと違い同じ音程が複数ポジションにあります(これがギタリストが譜面に弱い原因のひとつです)。

abcjsは入力した楽譜から自動でTAB譜を作成・表示してくれるのですが、そのポジションが変更できません。

例えば「ドレミファソラシド」にしても、ギターであればざっくり6パターン以上の運指が考えられます。

abcjsは運指を機械的にはじき出しているので、非現実的なTAB譜になることもしばしば。
機械的にはじき出すだけでも凄いんですが。

以上を不満点としましたが、正直こればかりは仕方がないですね。

なのでTAB譜に関しては響きを確認する程度にとどめて、自身で現実的な運指に変えていくのが良いかと思います。