JavaScript音频播放器前进按钮无法工作问题求助

问题分析 #

你的前进按钮失效是以下代码错误导致的：

• document.getElementById(audio1) 缺少引号，audio1是元素ID字符串，必须用引号包裹，否则会被当作未定义变量，导致audioElement获取失败。
• audioElement.src 返回的是完整绝对URL（比如http://你的域名/assets/choir.mp3），但songSrcs数组存的是相对路径，所以indexOf永远找不到匹配项，currentPos会变成-1+1=0，无法切换到下一首。
• Map获取值应该用get()方法，你写成了value()，属于API调用错误。
• document.querySelectorAll(".marquee").innerHTML 无效，querySelectorAll返回的是NodeList集合，需要遍历每个元素单独修改内容。
• 切换音频源后，需要调用load()和play()方法，否则新音频不会自动加载播放。

修正后的完整代码 #

HTML部分（无需修改） #

<div class="window" id="audioPlayer">
<div class="windowHeader" id="audioPlayerHeader"><span class="windowCloseButton" id="closeAudioPlayer">X</span>==== Audio Player ====</div>

<div class='marqueeContainer'><div class="marquee">Choir Singing - The Choir</div><div class="marquee">Choir Singing - The Choir</div></div>

<audio src="../assets/choir.mp3" muted loop id="audio1"></audio>

<div id="buttonBar">
<img src="../assets/back.png" id='backButton' onclick="backAudio(audio1)">
<img src="../assets/playButton.png" id="audio1PlayButton" onclick="toggleAudioPlay('../assets/pauseButton.png', '../assets/playButton.png', 'audio1')">
<img src="../assets/forward.png" id="forwardButton"></div>
</div>

JavaScript部分 #

const songSrcs = ["../assets/choir.mp3", "../assets/piano.mp3"];
const songMap = new Map();
songMap.set("../assets/choir.mp3", "Choir Singing - The Choir");
songMap.set("../assets/piano.mp3", "Piano that Plays");
// 修复：ID字符串加引号
let audioElement = document.getElementById("audio1");

const forwardButton = document.getElementById("forwardButton");
forwardButton.addEventListener("click", function() {
    // 修复：从完整URL中提取相对路径，匹配数组中的值
    const currentUrl = new URL(audioElement.src);
    // 适配你的路径层级，提取和songSrcs一致的相对路径
    const currentRelativePath = `../assets/${currentUrl.pathname.split('/').pop()}`;
    
    let currentPos = songSrcs.indexOf(currentRelativePath);
    
    // 提前实现边界判断：如果是最后一首，回到第一首
    if (currentPos < songSrcs.length - 1) {
        currentPos++;
    } else {
        currentPos = 0;
    }
    
    const newTrack = songSrcs[currentPos];
    audioElement.src = newTrack;
    // 修复：遍历修改所有marquee元素内容
    document.querySelectorAll(".marquee").forEach(el => {
        el.textContent = songMap.get(newTrack);
    });
    // 修复：加载并播放新音频
    audioElement.load();
    audioElement.play();
});

额外优化建议 #

• 维护一个全局的当前曲目索引变量，不用每次通过indexOf查找，提升效率。
• 前进/后退按钮在边界状态（第一首/最后一首）时添加禁用样式，提升用户体验。
• 保存音频的播放状态（播放/暂停），切换曲目后恢复对应状态。

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