1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<div id="abc-paper"></div>
<div id="abc-audio"></div>
<script src="https://cdn.jsdelivr.net/npm/abcjs@6.4.1/dist/abcjs-basic-min.js"></script>
<script>
  var visualObj = ABCJS.renderAbc('abc-paper', abcNotation, {
    responsive: 'resize'
  });
  // 播放功能
  var synthControl = new ABCJS.synth.SynthController();
  synthControl.load('#abc-audio', null, {
    displayPlay: true,
    displayProgress: true,
    displayWarp: true
  });
  synthControl.setTune(visualObj[0], false);
</script>

1
2
3
4
5
6
7
8

{{< abc play="true" >}}
X:1
T:小星星
M:4/4
L:1/4
K:C
C C G G | A A G2 |
{{< /abc >}}