これは何ですか？
前回やってみた abcjs の表示を、ちょっといい感じにします。
追加したコード
外部ソースの読み込み（ここは変更なし）
<script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/3.1.1/abcjs_plugin-min.js"> </script>
楽譜データ本体（察してください）
<div class="score"> 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 |] </div>
変換処理を呼び出し
<script>
var scoreObj = document.getElementsByClassName("score");
for (var i in scoreObj) {
// 改行タグを削除
var srcAbc = scoreObj[i].innerHTML.replace(/<br>/g, '');
// 親要素を追加（背景色用）
var outerDiv = document.createElement('div');
outerDiv.style.backgroundColor = '#cca';
scoreObj[i].parentNode.insertBefore(outerDiv, scoreObj[i]);
outerDiv.appendChild(scoreObj[i]);
// 楽譜変換処理
ABCJS.renderAbc(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 |]
とりあえず使えそうです。
（なんか歌詞が位置ずれしてる？）
今後の課題
表示色をなんとかしたい…… js で自動処理させるように変更しました。楽譜本体をスッキリ書くことができますね。改行するとバグる…… はてな記法で改行すると、行末に<br>が挿入されてしまうようです。これを自動で削除させました。- 音を出せるようにしたい …… どうしよう🤔
