修复ABCJS播放器无法更新曲谱的问题

你遇到的问题是因为 synthControl 实例在第一次创建后被复用了，但它并没有自动感知到 visualObj 的更新。你需要确保在每次点击播放时，先禁用旧的音频实例，再加载新的。请将你的 script 部分替换为以下代码：

var synthControl;

document.getElementById('btn-play').addEventListener('click', async function() {
    var abcText = document.getElementById('abc-input').value;

    // 1. 渲染乐谱
    var visualObj = ABCJS.renderAbc("paper", abcText, { responsive: "resize" })[0];

    // 2. 销毁旧的播放实例（关键步骤）
    if (synthControl) {
        synthControl.disable();
    }

    // 3. 实例化播放控制器
    synthControl = new ABCJS.synth.SynthController();
    synthControl.load("#audio-controls", null, {
        displayLoop: true, displayRestart: true, displayPlay: true, displayProgress: true, displayWarp: true
    });

    // 4. 合成音频
    var createSynth = new ABCJS.synth.CreateSynth();
    try {
        await createSynth.init({ visualObj: visualObj });
        await synthControl.setTune(visualObj, false);
    } catch (error) {
        alert("音频合成失败，请检查ABC语法");
    }
});

你可以尝试使用这段《欢乐颂》测试，它逻辑简单且结构完整：

X:1
T:Ode to Joy
M:4/4
L:1/4
K:C
E E F G | G F E D | C C D E | E>D D2 |
E E F G | G F E D | C C D E | D>C C2 |

通过这种方式，每次点击按钮，旧的音频控制器都会被 disable() 掉，新的配置会被重新加载。