JavaScript音频播放故障求助：仅首曲可播放，其余无法播放

问题描述 #

我使用以下JavaScript代码实现音频播放功能：

Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=>{
    element.addEventListener('click', (e)=>{
        makeAllPlays();
        index = parseInt(e.target.id);
        e.target.classList.remove('fa-circle-play');
        e.target.classList.add('fa-circle-pause');
        audioElement.src = '1/${index}.mp3';
        audioElement.currentTime = 0;
        audioElement.play();
        masterPlay.classList.remove('fa-circle-play');
        masterPlay.classList.add('fa-circle-pause');
    })
})

目前遇到的问题：仅第一首音频可正常播放，点击其他音频时，当前播放的音频会停止，但目标音频无法播放。我的音轨文件存储在本地路径C:\Users\Education\Desktop\1下，想确认是路径使用有误还是存在其他问题？

问题分析与修复 #

1. 模板字符串语法错误（核心问题） #

你在设置音频路径时使用了单引号'1/${index}.mp3'，但ES6的变量插值（${变量}）仅在**反引号（）包裹的模板字符串**中生效。单引号中的${index}会被当作普通字符串直接解析，导致只有当index=1时，路径是1/1.mp3能匹配到文件；其他情况下路径为1/${index}.mp3`，根本找不到对应音频文件。

修复代码：

// 将单引号替换为反引号，启用模板字符串解析
audioElement.src = `1/${index}.mp3`;

2. 本地文件路径的正确使用方式 #

你的音频文件存放在本地C:\Users\Education\Desktop\1，在浏览器中运行网页时需要注意：

• 确保网页文件（如index.html）与1文件夹处于同一目录层级，或者使用正确的相对路径。例如网页在Desktop根目录时，路径应写为./1/${index}.mp3；若网页在子文件夹中，需调整路径层级（如../1/${index}.mp3）。
• 避免直接使用本地绝对路径（如C:\Users\...），浏览器出于安全限制，通常不允许直接访问本地文件系统的绝对路径。建议通过本地服务器运行网页（比如VSCode的Live Server插件），再使用相对路径访问音频文件。

3. 其他潜在问题排查 #

• 验证e.target.id的取值：确认点击元素的id是纯数字格式，若包含非数字字符，parseInt会返回NaN，导致路径错误。可在代码中添加console.log(index)，查看控制台输出的index值是否符合预期。
• 检查makeAllPlays()函数：确认该函数正确重置了所有播放按钮的状态，避免因按钮状态混乱影响播放逻辑。

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