单选按钮onClick触发切换Audio音频源无中断播放实现求助

问题根源 #

• 全局Audio实例仅在页面初始化时生成，后续切换单选按钮仅调用changeAudio()返回新地址，没有同步更新Audio实例的src属性，音频资源本身没有变化
• 没有记录音频播放状态，切换后无法自动续播，所以看不到切换效果

改造方案 #

1. 调整全局变量定义 #

全局仅保留一个Audio实例复用，新增变量记录播放状态：

const audioPlayer = new Audio();
// 记录当前是否处于播放状态
let isPlaying = false;

2. 改造changeAudio()函数 #

不再仅返回url，直接同步更新Audio实例的资源，播放状态下自动续播：

function changeAudio() {
    let targetUrl = '';
    if (document.getElementById('Duck').checked) {
        targetUrl = '替换为鸭子音频的实际资源地址';
    } else if (document.getElementById('Dog').checked) {
        targetUrl = '替换为狗音频的实际资源地址';
    } else if (document.getElementById('Cat').checked) {
        targetUrl = '替换为猫音频的实际资源地址';
    } else if (document.getElementById('Cow').checked) {
        targetUrl = '替换为牛音频的实际资源地址';
    }
    // 更新音频资源
    audioPlayer.src = targetUrl;
    
    // 如果当前正在播放，切换后自动加载播放新资源
    if (isPlaying) {
        audioPlayer.load();
        audioPlayer.play();
    }
}

3. 新增开始按钮播放控制逻辑 #

给你的开始按钮绑定点击事件，控制播放暂停并同步状态：

// 请将playBtn替换为你实际的开始按钮ID
document.getElementById('playBtn').addEventListener('click', function() {
    if (audioPlayer.paused) {
        audioPlayer.play();
        isPlaying = true;
    } else {
        audioPlayer.pause();
        isPlaying = false;
    }
});

可选平滑优化 #

如果需要完全无空白的无缝切换，可以在资源加载完成后再触发播放，避免加载间隙：
将changeAudio()里的播放逻辑替换为以下代码即可：

if (isPlaying) {
    audioPlayer.load();
    // 等新资源加载完成后再播放，仅触发一次事件
    audioPlayer.addEventListener('canplaythrough', function() {
        audioPlayer.play();
    }, { once: true });
}

原有HTML单选框的onClick绑定不需要修改，直接保留即可正常运行。

内容的提问来源于stack exchange，提问作者Jorge Adrianzen