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

Question

这听起来像花：D

ANYway... 所以我刚刚在一个页面上添加了两组非常简单的 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>