abcjs をブログに組込む

2017-01-21

abcjs とは

abcjs とは、ブラウザ上で楽譜を表示するためのソフトウェアである。JavaScript と HTML5 の技術を用いている。

abcjs をブログで使うには

abcjs をブログで使うために実施したことを述べる。ここでは朝日ネットのブログ（アサブロ）で行なったことをもとにしている。以下は旧版である。

  1. https://github.com/paulrosen/abcjs にアクセスし、Basic のリンク先にある JavaScript ファイルをコンピュータの適当な場所にダウンロードする。 名前は abcjs-basic-min.js でよい。
  2. ダウンロードした場所と同じ場所に、1. のJavaScript ファイルを参照する html ファイルを作成する。
  3. 2. で作成した html ファイルに http でアクセスする。

アサブロでは、HTMLカスタマイズという機能がある。 この機能では、いくつかの特定個所に任意の HTML を挿入できる。 私は、<head 要素 閉じタグ直前> の個所に、次の HTML を埋め込んでいる。 

	<link rel="stylesheet" href="https://www.ne.jp/asahi/music/marinkyo/abcjs-audio.css" />
	<script src="https://www.ne.jp/asahi/music/marinkyo/js/abcjs-basic-min.js"></script>

ここでは、html ファイルのごく簡単な例を挙げる。 

<p>
ヴィヴァルディのチェロソナタは下記の通り。
<div id="vivaldi_rv47_1"></div>
ヴィヴァルディのチェロソナタは上記の通り。下記から再生できる。
<div id="vivaldi_rv47_1_synth"></div>
</p>
<script>
const vivaldi_rv47_1 = `
X: 1
T: SONATA I
C: A. Vivaldi
M: C
L: 1/16
Q: "Largo"
K: Bb
K: clef=bass
B,2(DC) B,2F,2 (B,A,)B,2 z2B,2|C2D2 E2(DC) (DC)B,2 z D2|`

window.addEventListener('load', () => {
  if (ABCJS.synth.supportsAudio()) {
    let visualObj=ABCJS.renderAbc("vivaldi_rv47_1", vivaldi_rv47_1, {})[0]
    let synthControl = new ABCJS.synth.SynthController();
    synthControl.load("#vivaldi_rv47_1_synth", null, {displayRestart: true, displayPlay: true, displayProgress: true});
    synthControl.setTune(visualObj, false, {qpm: 120});
  } else {
    document.querySelector("#harusaki_kobeni_synth").innerHTML = "<div class='audio-error'>Audio is not supported in this browser.</div>";
  }
});
</script>

ここでは、レンダリング関数 ABCJS.renderAbc の仕様を調べる。https://docs.abcjs.net/visual/overview.html や、 https://docs.abcjs.net/visual/render-abc-options.html によれば、 次のとおり引数を 3 つ取る。

var tuneObjectArray = renderAbc(elementArray, abcString, options);