Javascript 动态HTML音频播放器

我有从数据库中提取的音频链接。我想有一个播放和暂停按钮，每首歌曲和进度条，显示任何歌曲正在播放。目前播放按钮只播放列表中的最后一首歌，而不是每首歌，我不知道为什么

<?php
include '../../header.php';
session_start();
if(!$_SESSION['logged']){
    header("Location: index.php");
    exit;
}
?>

<!--static labels-->
<div class="container">
<ul class="list-group">
<li class='col-xs-3 list-group-item'>Title</li>
<li class='col-xs-6 list-group-item'>Description</li>
<li class='col-xs-3 list-group-item'><audio id="theplayer" controls></audio></li>
</ul>
</div>
</br>
<!--sql query and dynamic html elements-->
<?php
$tableUser = $_SESSION['username'];
 $con = mysqli_connect("127.0.0.1:3306","localhost","","songstorage"); 
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
$result = mysqli_query($con,"SELECT * FROM $tableUser");
while($row = mysqli_fetch_array($result))
  {
      echo "<div class='container'><ul>";
      echo  "<li class='col-xs-1'>".$row['songid']."</li>";
      echo "<li class='col-xs-4'>".$row['title']."</li>";
      echo "<li class='col-xs-7'>".$row['description']."</li>";
      echo "<li class='col-xs-3'><button onclick='playaudio()' type='button'>Play</button><audio id='".$row['songid']."'><source src='".$row['url']."'></audio></li>";
      echo "</ul></div>";
      echo "<script type='text/javascript'>
var myAudio=document.getElementById('".$row['songid']."');
function playaudio(){
    myAudio.load();
    myAudio.play();
}
function pauseaudio()
  { 
  myAudio.pause(); 
  } 
  </script>";
      $audioid = array($row['songid']);
       var_dump($audioid);
       }
?>

<!--buttons and audio elements for testing-->
<audio id="testaudio"><source src="18secFX.wav"></audio>


<!--script to pull play audio links-->
<?php
//  $songids = mysqli_query($con,"SELECT songid FROM $tableUser");
//$songarray = mysqli_fetch_row($songids);
//var_dump($songarray);

?>

<?php
  mysqli_close($con);
?>
<button onclick="playaudio()" type="button">Play Video</button>
<button onclick="pauseaudio()" type="button">Pause Video</button> 


</body>
</html>

标题
说明




播放视频
暂停视频

尝试动态生成按钮并将值传递给onclick函数：

<button onclick="playaudio(".$row['songid'].")" type="button">Play Video</button>

 function playaudio(songid){
 document.getElementById(songid).load();
 document.getElementById(songid).play();
}

---

.$row['songid']。正在从数据库打印动态ID。所以每个id都是id=“1”id=“2”等等。我认为发生的事情是因为它在一个循环中，它通过循环，javascript以最后一个id结束……我希望它得到我单击的按钮的id。很好！作品非常感谢。