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

Posted 2023-02-25

【中文标题】一页上有多个简单的 HTML 播放/暂停按钮的问题

【英文标题】：Problem with multiple simple HTML Play/Pause buttons on one page

【发布时间】：2021-01-17 20:05:22

【问题描述】：

这听起来像花：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>

【问题讨论】：

“即使我给它们起不同的名字”是什么意思？您将它们都命名为x。

我猜对你来说很明显。谢谢;)

【参考方案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>

【讨论】：

很棒的尼古拉谢谢你。尽管这是非常基本的编码，但它超出了我的范围。我现在明白（我认为）“var”是一个变量，我将它们都分配给了“x”。您的代码比单独编写代码更有效！穆哈斯·格拉西亚斯！！