HTML/JavaScript音频播放器切换歌曲异常：播放时sfile值为空

核心问题：页面刷新导致全局变量重置 #

你点击歌曲链接时，<a href="">会触发浏览器默认跳转行为（刷新页面），这会让全局变量sfile被重新初始化为空字符串，所以点击播放按钮时拿到的始终是空值。

修复步骤 #

1. 阻止a标签的默认跳转行为 #

修改HTML中的链接，避免页面刷新，二选一即可：

<!-- 方式1：用javascript:void(0)替代空href -->
<a href="javascript:void(0)" onclick="setfp(1)">Song 1</a>
<a href="javascript:void(0)" onclick="setfp(2)">Song 2</a>

<!-- 方式2：在onclick中返回false阻止跳转 -->
<a href="" onclick="setfp(1); return false;">Song 1</a>
<a href="" onclick="setfp(2); return false;">Song 2</a>

2. 优化JavaScript逻辑（可选，提升体验） #

当前逻辑切换歌曲需要先暂停再点击播放，可优化为点击歌曲链接后直接切换并播放新歌曲，同时停止当前播放：

const player = document.getElementById('player');
const playBtn = document.getElementById('play-btn');
let isPlaying = false;

function setfp(song_number) {
    const newSrc = `./sf/${song_number}.mp3`;
    // 停止当前播放的歌曲
    if (!player.paused) {
        player.pause();
        isPlaying = false;
        playBtn.classList.remove('pause');
    }
    // 设置新音频源并播放
    player.src = newSrc;
    player.load();
    player.play();
    isPlaying = true;
    playBtn.classList.add('pause');
}

function togglePlay() {
    if (!player.paused) {
        player.pause();
        isPlaying = false;
        playBtn.classList.remove('pause');
    } else {
        // 确保有音频源才执行播放
        if (player.src) {
            player.play();
            isPlaying = true;
            playBtn.classList.add('pause');
        }
    }
}

function init() {
    if (playBtn) {
        playBtn.addEventListener('click', togglePlay);
    }
}

init();

3. 额外注意事项 #

• 确认音频文件路径./sf/1.mp3、./sf/2.mp3真实存在，路径格式正确。
• 若浏览器阻止自动播放（现代浏览器默认阻止无用户交互的自动播放），可保留原逻辑：点击歌曲链接设置音源后，再点击播放按钮启动播放。

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