ABC记谱法测试案例：欢乐颂

出现修改后无法播放的问题，通常是因为旧的 CreateSynth 实例仍在占用音频上下文。请将你的代码中 btn-play 的事件处理逻辑替换为以下方式，确保每次点击都重置音频状态：

// 使用一个全局变量保存当前的音频实例
let currentSynth = null;

document.getElementById('btn-play').addEventListener('click', async function() {
    const abcText = document.getElementById('abc-input').value;
    
    // 1. 渲染乐谱
    const visualObj = ABCJS.renderAbc("paper", abcText, { responsive: "resize" })[0];

    // 2. 清理之前的音频（核心步骤）
    if (currentSynth) {
        await currentSynth.stop();
    }

    // 3. 重新初始化音频
    currentSynth = new ABCJS.synth.CreateSynth();
    await currentSynth.init({ visualObj: visualObj });
    
    if (!synthControl) {
        synthControl = new ABCJS.synth.SynthController();
        synthControl.load("#audio-controls", null, { displayPlay: true, displayProgress: true });
    }
    
    await synthControl.setTune(visualObj, false);
});

你可以尝试使用下面这段《欢乐颂》的 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 |