带有音频标签的多个播放/暂停按钮

Multiple Play/Pause button with audio tag

本文关键字：播放 暂停 按钮 音频 标签      更新时间：2023-09-26

我在同一代码中遇到了一个以上播放/暂停按钮的问题，我有一个表，其中有一个按钮，然后在右边的单元格上显示歌曲名称。

按钮工作得很好，这是代码（从互联网上获得）：

<script language="javascript">
function play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}
</script>

和音频部分

 <html>
    <table>
      <tr>
         <td>
     <audio preload="none" id="myAudio" src="music.mp3" type="audio/mpeg"</audio>          
     <img src="play.png"  width=30 height=30 border="0" onclick="play_pause()";>
        </td>
      </tr>
      <tr>
         <td>
     <audio preload="none" id="myAudio" src="music2.mp3" type="audio/mpeg"</audio>          
     <img src="play.png"  width=30 height=30 border="0" onclick="play_pause()";>
       </td>
       </tr>    
     </table>
</html>

因此，每当我在网上播放任何按钮时，它都会启动第一首歌，如果我试图播放另一首，它就像我打开了第一首歌（实际上只播放第一首，即使我找到了另一首）我很确定这是因为我的函数中缺少代码，而且两个音频标签都引用了相同的ID，但是，我必须在脚本上实现什么才能使我的页面正常工作？我尝试了很多东西，但都没能真正做到我想要的效果。我非常感谢你的建议，提前谢谢。

Ps：现在对我来说没有必要，但如果有了代码，我也可以为我的音频获得一个更改图标，我的意思是当"onclick"它时，我会更改为暂停图标，谢谢！

您可以在类似的对象之间放置差异

    function play_pause(player) {
      var myAudio = document.getElementById(player);
      if (myAudio.paused) {
        myAudio.play();
      } else {
        myAudio.pause();
      }
    }

和

    <html>
<table>
  <tr>
     <td>
 <audio preload="none" id="myAudio1" src="music.mp3" type="audio/mpeg"</audio>          
 <img src="play.png"  width=30 height=30 border="0" onclick="play_pause('myAudio1')";>
    </td>
  </tr>
  <tr>
     <td>
 <audio preload="none" id="myAudio2" src="music2.mp3" type="audio/mpeg"</audio>          
 <img src="play.png"  width=30 height=30 border="0" onclick="play_pause('myAudio2')";>
   </td>
   </tr>    
 </table>

编辑：使用此循环超过4名玩家

   var songs=['song1.mp3','song2.mp3','song3.mp3','song4.mp3'];
   var players="<table>";
   for(var i=0;i<songs.length;i++){
       players+='<tr>
     <td>
 <audio preload="none" id="myAudio_'+i+'" src="'+songs[i]+'" type="audio/mpeg"</audio>          
 <img src="play.png"  width=30 height=30 border="0" onclick="play_pause(''myAudio_'+i+''')";>
    </td>
  </tr>';
   }
  players+="</table>"
 document.getElementById('myTable').innerHTML=players;

和你的html

 <body> <div id='myTable'></div>    </body>
相关文章：