如何在JavaScript中获取选中歌曲名并切换时逐一显示

问题根源 #

1. 选择文件后仅显示最后一首歌名：你用循环遍历所有文件并依次设置标题，循环结束后标题自然被最后一首的名字覆盖，正确做法是直接设置当前播放的首曲名称。
2. 切换歌曲时标题不更新：切换函数仅更新了音频源，但未同步修改标题元素的内容。
3. 重复绑定事件隐患：每次选择文件都会重新绑定音频结束、按钮点击事件，多次选择后会触发多次切换逻辑。

修复后的完整代码 #

HTML代码（无需修改）

<button id="select-audio">Select Files</button>
<button id="prv">Previous</button>
<button id="nxt">Next</button>
<audio id="aud" controls></audio>
<p id="title"></p>

JavaScript代码

const aud = document.getElementById("aud");
const prv = document.getElementById("prv");
const nxt = document.getElementById("nxt");
const titleEl = document.getElementById("title");
let audios = [];
let currentIndex = 0;
const selectAudio = document.getElementById("select-audio");

// 更新音频及标题的通用函数
function updateAudio() {
    // 释放之前的URL对象，避免内存泄漏
    if (aud.src) {
        URL.revokeObjectURL(aud.src);
    }
    const url = URL.createObjectURL(audios[currentIndex]);
    aud.src = url;
    titleEl.textContent = audios[currentIndex].name;
    aud.play();
}

// 下一首逻辑
function nxtAudio() {
    if (audios.length === 0) return;
    currentIndex = currentIndex < audios.length - 1 ? currentIndex + 1 : 0;
    updateAudio();
}

// 上一首逻辑
function prvAudio() {
    if (audios.length === 0) return;
    currentIndex = currentIndex > 0 ? currentIndex - 1 : audios.length - 1;
    updateAudio();
}

// 初始化事件监听（仅绑定一次）
aud.addEventListener('ended', nxtAudio);
nxt.addEventListener('click', nxtAudio);
prv.addEventListener('click', prvAudio);

// 选择文件逻辑
selectAudio.addEventListener('click', function() {
    const input = document.createElement('input');
    input.type = "file";
    input.accept = "audio/*";
    input.multiple = true;
    input.onchange = function(e) {
        audios = Array.from(e.target.files);
        if (audios.length === 0) return;
        currentIndex = 0;
        updateAudio();
    };
    input.click();
});

关键修改说明 #

• 提取updateAudio通用函数，统一处理音频源更新、标题更新、播放操作，避免重复代码。
• 事件监听仅初始化绑定一次，解决重复绑定导致的多次触发问题。
• 添加URL.revokeObjectURL释放已创建的URL对象，防止浏览器内存泄漏。
• 选择文件后直接定位到首曲并调用updateAudio，同时处理了未选择文件的边界情况。
• 切换歌曲时通过updateAudio同步更新标题，确保歌名和播放内容一致。

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