一个页面上有多个简单的HTML播放/暂停按钮的问题

Question

听起来像花:D

无论如何……因此，我只是在一个页面上添加了两组非常简单的HTML播放和暂停按钮，每组按钮用于播放不同的MP3文件。问题是，无论我做什么，这两组按钮都只指向最后提到的曲目。它们都控制同一个MP3文件，尽管我给它们起了不同的名字。在这种情况下，两组按钮都可以播放或暂停2.mp3，而忽略1.mp3 .....发生了什么事，我该怎么解决?

<td>
<audio id="track1"><source src="tracks/1.mp3" type="audio/mpeg"></audio>
<button onclick="playAudio()" type="button" style="background-color:black; border-color:#666666; color:#FFFF66"><font size="3" face="Arial, sans-serif" color="#FFFF66">&nbsp;<strong>&#9658;</strong></button></font>&nbsp;<button onclick="pauseAudio()" type="button" style="background-color:black; border-color:#666666; color:#FFFF66"><font size="3" face="Arial, sans-serif" color="#FFFF66">&nbsp;<strong>II</strong>&nbsp;</font></button> 
<script>
var x = document.getElementById("track1"); 
function playAudio() { 
x.play(); 
} 
function pauseAudio() { 
x.pause(); 
} 
</script>
</td>
<td>
<audio id="track2"><source src="tracks/2.mp3" type="audio/mpeg"></audio>
<button onclick="playAudio()" type="button" style="background-color:black; border-color:#666666; color:#FFFF66"><font size="3" face="Arial, sans-serif" color="#FFFF66">&nbsp;<strong>&#9658;</strong></button></font>&nbsp;<button onclick="pauseAudio()" type="button" style="background-color:black; border-color:#666666; color:#FFFF66"><font size="3" face="Arial, sans-serif" color="#FFFF66">&nbsp;<strong>II</strong>&nbsp;</font></button> 
<script>
var x = document.getElementById("track2"); 
function playAudio() { 
x.play(); 
} 
function pauseAudio() { 
x.pause(); 
} 
</script>
</td>

Answer 1

问题是您将两个不同的元素赋值给一个变量，因此最后一个赋值是有效的，只处理第二个元素。

你可以使用下面的修改，使元素被参数化管理，习惯使用这种方式来处理重复的CSS。

<td>
<audio id="track1">
<source src="tracks/1.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio('track1')" type="button" style="background-color:black; border-color:#666666; color:#FFFF66"><font size="3" face="Arial, sans-serif" color="#FFFF66">&nbsp;<strong>&#9658;</strong></button></font>&nbsp;<button onclick="pauseAudio('track1')" type="button" style="background-color:black; border-color:#666666; color:#FFFF66"><font size="3" face="Arial, sans-serif" color="#FFFF66">&nbsp;<strong>II</strong>&nbsp;</font></button> 
</td>
<td>
<audio id="track2">
<source src="tracks/2.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio('track2')" type="button" style="background-color:black; border-color:#666666; color:#FFFF66"><font size="3" face="Arial, sans-serif" color="#FFFF66">&nbsp;<strong>&#9658;</strong></button></font>&nbsp;<button onclick="pauseAudio('track2')" type="button" style="background-color:black; border-color:#666666; color:#FFFF66"><font size="3" face="Arial, sans-serif" color="#FFFF66">&nbsp;<strong>II</strong>&nbsp;</font></button> 
</td>
<script>
function playAudio(id) { 
document.getElementById(id).play(); 
} 
function pauseAudio(id) { 
document.getElementById(id).pause(); 
} 
</script>