kit84 talks

社会人 / AtCoder 緑 / くBC 水

abc 記譜法で音を鳴らすよ

abcjs

これは何ですか？

前回の記事： abcjs で楽譜を表示する

abcjs を使って、記事中に楽譜を表示するとともにプレーヤーを表示してみます。

※音が出ます。

追加したコード

外部ソースの読み込み（変えました）
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_basic_midi-min.js"></script>
デザインデータ

GitHub の過去ログから CSS ファイル の中身をコピーして、貼り付けます（はてなブログ設定のデザイン項目に貼っても OK です）

<style>
/* Some basic CSS to make the MIDI controls in abcjs presentable. */

.abcjs-inline-midi {
	height: 26px;
	padding: 2px 5px;
	border-radius: 3px;
	color: #f4f4f4;
	background-color: #424242;
	display: flex;
}
〜（以下略）〜
</style>
楽譜データ

（略）

再生用データ
<div class="player">
M:2/2
L:2/4
Q:27
[V:1] [CEG] [B,DFG] | [CEG]2 |]
[V:2 bass] C, G,, | C,2 |]
</div>
楽譜表示処理を呼び出し

（略）

プレーヤー表示処理を呼び出し
<script>
  // サウンドフォントの指定（重要）
  ABCJS.midi.soundfontUrl="https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/";
  
  var scoreObj = document.getElementsByClassName("player");
  for (var i in scoreObj) {
    // 改行タグを削除
    var srcAbc = scoreObj[i].innerHTML.replace(/<br>/g, '');
    // MIDI 変換処理
    ABCJS.renderMidi(scoreObj[i], srcAbc);
  }
</script>

変換結果


M:2/2
L:2/4
%%score={1|2
[V:1] "C"[CEG] "G7"[B,DFG] | "C"[CEG]2 |]
w: T D T
w: I V7 I
[V:2 bass] C, G,, | C,2 |]


M:2/2
L:2/4
Q:27
%%score={1|2
[V:1] [CEG] [B,DFG] | [CEG]2 |]
[V:2 bass] C, G,, | C,2 |]

プレーヤーが表示されました！
（なんか読み込みに時間がかかるらしく、2 回くらい空走させてからじゃないと正しく鳴らないですね🤔）

最近になって過去バージョンの置き場所諸々が変わったらしく、ここまで漕ぎ着けるのに苦労しました……

今後の課題

  • 音を出せるようにしたい …… 音が鳴ったので、OK！ｗ
  • サイズ調整したほうがいいかも

参考文献