点击指定文本播放对应MP3的代码异常问题求助

嘿，我一眼就看出问题出在哪了——你给所有<audio>标签都用了同一个id="audio"！在HTML里，id是全局唯一的标识，当你通过getElementById("audio")获取元素时，浏览器只会返回第一个匹配的那个，这就导致不管你点哪个文本，都只会触发第一个音频的播放。

下面给你两种修复方案，按需选择：

方案一：给每个音频设置唯一ID #

这种方式保留你原来的多音频标签结构，只需要给每个<audio>分配不同的id，然后在点击事件里传递对应的id：

<audio id="audio1" src="mp3 file 1" autostart="false"></audio>
<a onclick="playSound('audio1');">Text 1</a>

<audio id="audio2" src="mp3 file 2" autostart="false"></audio>
<a onclick="playSound('audio2');">Text 2</a>

<audio id="audio3" src="mp3 file 3" autostart="false"></audio>
<a onclick="playSound('audio3');">Text 3</a>

<script>
function playSound(audioId) {
  // 可选：暂停所有正在播放的音频，避免同时播放多个
  document.querySelectorAll('audio').forEach(audio => audio.pause());
  
  const targetAudio = document.getElementById(audioId);
  targetAudio.currentTime = 0; // 重置到音频开头，再次点击可重新播放
  targetAudio.play();
}
</script>

方案二：用单个音频标签+自定义属性（更简洁） #

如果不想创建多个<audio>标签，可以只保留一个播放器，通过data-*属性存储每个文本对应的音频地址，点击时动态切换播放器的源：

<audio id="audioPlayer" autostart="false"></audio>

<a onclick="playSound(this);" data-audio-src="mp3 file 1">Text 1</a>
<a onclick="playSound(this);" data-audio-src="mp3 file 2">Text 2</a>
<a onclick="playSound(this);" data-audio-src="mp3 file 3">Text 3</a>

<script>
const audioPlayer = document.getElementById('audioPlayer');

function playSound(element) {
  const audioSrc = element.dataset.audioSrc;
  
  // 如果当前正在播放的是同一个音频，直接重置到开头；否则切换源
  if (audioPlayer.src.includes(audioSrc)) {
    audioPlayer.currentTime = 0;
  } else {
    audioPlayer.src = audioSrc;
  }
  
  audioPlayer.play();
}
</script>

为什么原来的代码不工作？ #

再强调下核心原因：HTML规范明确要求id属性在整个文档中必须唯一。当你重复使用id="audio"时，浏览器的DOM查询方法（比如getElementById）只会返回第一个匹配的元素，所以所有点击事件都只能操作第一个<audio>标签，自然只会播放第一个音频啦。

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