abcjsで音の鳴らし方解説編 - 日本だんでぃ協会

さて、前回無事にabcjsで音を鳴らすことに成功したので、導入方法を解説したいと思います！

まずは必要なファイルをダウンロードしてきましょう。

abcjsのGithubから
abcjs-midi.css
abcjs_basic_midi_3.0-min.js
abcjs_basic_2.3-min.js

byte-music.jsのGithubから
acoustic_grand_piano-ogg.js

必要なファイルは以上です。

ファイルをダウンロードしてきたら、ちゃちゃっとサーバーにアップしてしまいましょう。
ここからは、全てのファイルを「./abcjs/」にアップした前提で話を進めていきます。

サーバーにアップしたら、取りあえず動作確認をしましょう。
以下のコードをHTML内に記述します。

<div id="score" style="display:none;">
L:1/4
CDEFGABc
</div>

<div id="player" style="width:500px;"></div>

<link href="./abcjs/abcjs-midi.css" media="all" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="./abcjs/abcjs_basic_2.3-min.js" ></script>
<script type="text/javascript" src="./abcjs/abcjs_basic_midi_3.0-min.js" ></script>
<script>
	ABCJS.midi.soundfontUrl="./abcjs/";
	ABCJS.renderMidi( "player", document.getElementById("score").innerHTML, {}, { generateInline: true }, {} );
</script>

↓こんな感じのプレイヤーが表示されて、「ドレミファソラシド♪」と再生されたら成功です。

では、コードの解説をしていきます。

<div id="score" style="display:none;">
L:1/4
CDEFGABc
</div>

この部分は、実際に演奏される音符をABC記譜法で定義しています。
前にも書きましたけど、javascriptのコード内にABC記譜法を記述しようとすると、
改行コードの影響で書きづらいので、
こんな感じにHTML内に記述して、「style="display:none;"」を付けて見えなくしています。

色々と試してみましたが、多分このやり方が一番記述しやすいんじゃないかしら。

<div id="player" style="width:500px;"></div>

この記述をした場所にプレイヤーが表示されます。
「style="width:500px;"」を外すと横幅いっぱいに表示されてしまうので、
サイトのデザインに合わせた数値を入れると良いと思います。

<link href="./abcjs/abcjs-midi.css" media="all" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="./abcjs/abcjs_basic_2.3-min.js" ></script>
<script type="text/javascript" src="./abcjs/abcjs_basic_midi_3.0-min.js" ></script>

この部分で、必要なファイルを読み込んでいます。
お作法的にはheadタグの中に入れるのが正しいんでしょうけど、
どこに書いても動作するようです。

<script>
	ABCJS.midi.soundfontUrl="./abcjs/";
	ABCJS.renderMidi( "player", document.getElementById("score").innerHTML, {}, { generateInline: true }, {} );
</script>

この部分で実際にプレイヤーを生成しています。

idが「player」のHTML要素に、idが「score」のHTML要素の中身のABC譜を使用してプレイヤーを生成。
みたいな意味のコードになっています。

と、こんな感じです。

いかがでしたでしょうか。
abcjsで音を出すところまでを解説しているサイトが見つからなかったので、
もしお役に立てたら幸いです♪

次回以降はabcjsを使って色々とコンテンツを作成していこうと思います。

お楽しみに～♪

■abcjsで音の鳴らし方解説編