使用Javascript播放音频

我尝试在用户使用JavaScript单击按钮后播放音频。我在数据库中循环使用PHP获取音频文件，但每当我单击播放按钮时，它都会播放存储在数据库中的第一个音频，即使我单击了循环显示的其他音频，它仍会播放数据库中的第一个音频

我做错了什么

这是我的代码：

<div class="ms_weekly_wrapper" id="wrapper">
    <div class="ms_weekly_inner" id='player'>
      <?php
      require '../db.php';
      $sql = "select * from top15";
      $sql_query = mysqli_query($con, $sql);
      $i = 1;
      while ($row = mysqli_fetch_array($sql_query)) {
        echo '<audio id="music_player">';
        echo "<source src='../Admin/Song/songAudio/" . $row['song_audio'] . "'/>";
        echo '</source>';
        echo '</audio>';
        echo ' <input type="image" src="images/play.png" onclick="play_aud()" id="play_button">';

        echo '<div class="ms_divider"></div>';
      }
      ?>

    </div>
</div>

这就是我试图做的

   <audio id="<? php echo $audio_Id? >"; 

---

您为所有音频元素提供了相同的id
，然后在尝试播放音频
文档时使用该id。getElementById（“音乐播放器”）
。您需要为他们提供唯一的id，然后引用要播放的元素的特定id。请编辑您的问题，以包含任何其他代码尝试。正如您所见，在注释中读取代码非常困难。我尝试使用存储在数据库中的音频id提供音频元素id，等待响应。我要求您将新代码放在问题中，而不是放在注释中。
   <audio id="<? php echo $audio_Id? >"; 

   var id = "<? php echo $audio_Id? >"; 
   player =  document.getElementById(id);