HTML5与JS音频控件复制后无法播放问题求助

我正在做一个学校项目网站，原本实现了点击吉他图片播放/暂停音频的功能，一切正常。但复制代码添加另一组吉他与音频后，功能完全失效。我已经修改了所有ID、资源路径等确保没有重复项，但问题依然存在。移除新增的音频代码后，原有功能又恢复正常。

相关代码 #

HTML片段 #

<h2>Van Halen</h2>
<audio src="son/légendes/vanhalen.mp3" id="vanhalenaudio" preload="auto"></audio>
<p style="float:right"><img src="images/légendes/vanhalenguitar.png" id="clickable" onclick="vanhalenbutton()" /></p>
<script type="text/javascript" src="javascript/légendes/son/vanhalen.js"></script>

<p style="float:left"><img src="images/légendes/vanhalen.png" /></p>
<br><br><br><br> 
<p>stuff</p>

<br><br><br><br><br><br><br>

<h2>Jimi Hendrix</h2>
<audio src="son/légendes/jimihendrix.mp3" id="jimihendrixaudio" preload="auto"></audio>
<p style="float:right"><img src="images/légendes/jimihendrixguitare.png" id="clickable" onclick="jimihendrixbutton()" width="350" height="350"/></p>
<script type="text/javascript" src="javascript/légendes/son/jimihendrix.js"></script>

<p style="float:left"><img src="images/légendes/jimihendrix.png" width="500" height="300"/></p>
<p>other stuff</p>
<br><br><br><br><br><br><br><br><br><br>

JS代码（两组逻辑一致，仅名称不同） #

var playing = false;
var audio = document.getElementById("ritchieblackmoreaudio");

function ritchieblackmorebutton() {
    playing ? audio.pause() : audio.play();
}

audio.onplaying = function() {
  playing = true;
};
audio.onpause = function() {
  playing = false;
};

核心问题 #

1. ID重复：两张吉他图片的ID都是clickable，HTML规范中ID必须唯一，重复ID会导致DOM选择器行为异常，干扰JS对元素的绑定逻辑。
2. 全局变量冲突：两个JS文件都定义了全局变量playing和audio，第二个JS加载时会直接覆盖第一个的变量值，导致原有功能的状态和音频对象被篡改。
3. ID不匹配：你提供的JS示例中，获取的音频ID是ritchieblackmoreaudio，但HTML中对应的是vanhalenaudio，这种ID不匹配也会导致功能失效。

修复步骤 #

1. 修正重复ID #

把两张图片的ID改成唯一值，比如分别设为vanhalen-guitar和jimihendrix-guitar：

<!-- Van Halen部分 -->
<p style="float:right"><img src="images/légendes/vanhalenguitar.png" id="vanhalen-guitar" onclick="vanhalenbutton()" /></p>

<!-- Jimi Hendrix部分 -->
<p style="float:right"><img src="images/légendes/jimihendrixguitare.png" id="jimihendrix-guitar" onclick="jimihendrixbutton()" width="350" height="350"/></p>

2. 避免全局变量冲突 #

将每个JS文件的代码封装成局部作用域，防止变量污染全局空间。以Van Halen的JS为例：

// vanhalen.js
(function() {
    var playing = false;
    var audio = document.getElementById("vanhalenaudio");

    window.vanhalenbutton = function() {
        playing ? audio.pause() : audio.play();
    };

    audio.onplaying = function() {
        playing = true;
    };
    audio.onpause = function() {
        playing = false;
    };
})();

同理修改jimihendrix.js，把函数名和音频ID对应替换为jimihendrixbutton和jimihendrixaudio即可。

3. 确保ID完全匹配 #

检查所有JS文件中getElementById的参数，必须和HTML中对应的音频ID完全一致，不能出现拼写错误或名称不匹配的情况。

额外优化建议 #

尽量避免使用内联onclick事件，改用addEventListener绑定事件，代码更易维护：

// 以Van Halen为例，去掉HTML中的onclick，JS中添加：
document.getElementById("vanhalen-guitar").addEventListener('click', function() {
    playing ? audio.pause() : audio.play();
});

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