kit84 talks

社会人 / AtCoder 緑 / くBC 水

はてなブログで abc 記譜法を使用してみた

abcjs

これは何ですか？

abcjs を用いた五線譜の表示を、やってみます。

追加したコード

外部ソースの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_plugin-min.js">
</script>

楽譜データ本体

<div style="background-color:#ffe">
<div class="score">%
M:4/4
L:1/4
K:C
CD EF | GA Bc ||
</div></div>

変換処理を呼び出し

<script>
	var scoreObj = document.getElementsByClassName("score");
	for( var i in scoreObj ){
		ABCJS.renderAbc( scoreObj[i], scoreObj[i].innerHTML );
	}
</script>

変換結果


%
M:4/4
L:1/4
K:C
CD EF | GA Bc ||

表示できました。

abc_1
↑ 上記画像のように見えているはずです。

今後の課題

  • 表示色をなんとかしたい
  • 改行するとバグる
  • 音を出せるようにしたい

参考文献