Javascript 如何在不使用相同音频id的情况下播放音频文件的多个实例

我在stack overflow上得到了这段代码，这是一个自定义音频播放器。但后来我修改了代码，从数据库中获取音频。我遇到的问题是，只有从我的数据库中得到的第一首歌被播放了

这是我用控件显示音频的代码

                <?php
                require '../db.php';
                $sql = "select * from songs order by song_id asc";
               $sql_query = mysqli_query($con,$sql);
                  $i=0;
                 while ($row = mysqli_fetch_array($sql_query)) {
                        $image = $row['song_image'];
                        $song_name = $row['song_name'];
                        $audio = $row['song_audio'];
                          ?>


        <audio controls="controls" class='podcast-audio hide' id="player">
  <source src="../Admin/Song/songAudio/<?php if(isset($audio)){ echo $audio;}?>" type="audio/mpeg" />
        </audio>
             <div id="audio-player">
               <div id="controls">
                 <i id="play" class="fa fa-play cursor-pointer"></i>
                 <span id="time" class="time">00:00</span>
                 <div id="progressbar" class='cursor-pointer ui-progressbar'></div>
                 <span id="end-time" class="time">00:00</span>
                 <i id="mute" class="fa fa-volume-up cursor-pointer"></i>
                 <div id="volume" class='cursor-pointer ui-progressbar'></div>
            </div>
             </div>


             <?php
              $i++;
               }
               ?>

这是我负责播放音频的javascript代码

 $(document).ready(function() {

var audio_player = $("#audio-player");
var play_button = $('#play');
var progress_bar = $("#progressbar");
var time = $("#time");
var mute_button = $('#mute');
var volume_bar = $('#volume');
var more_info = $('#more-info-box');
var player = $('#player')[0];
var duration = 0;
var volume = 0.5;
var end_time = $('#end-time');
player.onloadedmetadata = function () {
        duration = player.duration;
    var minutes = parseInt(duration / 60, 10);
    var seconds = parseInt(duration % 60);
    // finding and appending full duration of audio
    end_time.text(minutes + ':' + seconds);
    console.log('ddd', progress_bar)
    progress_bar.progressbar("option", { 'max': duration });
};
player.load();
player.volume = 0.5;
player.addEventListener("timeupdate", function () {
    progress_bar.progressbar('value', player.currentTime);
    time.text(getTime(player.currentTime));
}, false);
volume_bar.progressbar({
    value: player.volume * 100,
});

volume_bar.click(function (e) {
    var info = getProgressBarClickInfo($(this), e);
    volume_bar.progressbar('value', info.value);
    player.volume = info.value / info.max;
});

progress_bar.progressbar({
    value: player.currentTime,
});

progress_bar.click(function (e) {
    var info = getProgressBarClickInfo($(this), e);
    player.currentTime = player.duration / info.max * info.value;
});

play_button.click(function () {
    player[player.paused ? 'play' : 'pause']();
    $(this).toggleClass("fa-play", player.paused);
    $(this).toggleClass("fa-pause", !player.paused);
});

mute_button.click(function () {
    if (player.volume == 0) {
        player.volume = volume;
    } else {
        volume = player.volume;
        player.volume = 0;
    }

    volume_bar.progressbar('value', player.volume * 100);

    $(this).toggleClass("fa-volume-up", player.volume != 0);
    $(this).toggleClass("fa-volume-off", player.volume == 0);
});

more_info.click(function () {
    audio_player.animate({
      height: (audio_player.height() == 50) ? 100 : 50
    }, 1000);
});
 });
function getTime(t) {
var m = ~~(t / 60), s = ~~(t % 60);
return (m < 10 ? "0" + m : m) + ':' + (s < 10 ? "0" + s : s);
   }
function getProgressBarClickInfo(progress_bar, e) {
var offset = progress_bar.offset();
var x = e.pageX - offset.left; // or e.offsetX (less support, though)
var y = e.pageY - offset.top;  // or e.offsetY
var max = progress_bar.progressbar("option", "max");
var value = (x * max) / progress_bar.width();

return { x: x, y: y, max: max, value: value };
 }

$（文档）.ready（函数（）{
var audio_player=$（“#audio player”）；
变量play_按钮=$（“#play”）；
var progressbar=$（“#progressbar”）；
变量时间=$（“#时间”）；
var mute_按钮=$（“#mute”）；
var volume_bar=$（“#volume”）；
var more_info=$（“#more info box”）；
var player=$（'#player'）[0]；
var持续时间=0；
var体积=0.5；
var end_time=$（“#end time”）；
player.onloadedmetadata=函数（）{
持续时间=player.duration；
var minutes=parseInt（持续时间/60,10）；
var seconds=parseInt（持续时间%60）；
//查找和附加音频的完整持续时间
结束时间文本（分钟+'：'+秒）；
console.log（'ddd'，进度条）
progressbar（“选项”，{'max'：持续时间}）；
};
player.load（）；
player.volume=0.5；
player.addEventListener（“时间更新”，函数（）{
进度条。进度条（'value'，player.currentTime）；
text（getTime（player.currentTime））；
}，假）；
音量（巴）({
值：player.volume*100，
});
音量栏。单击（功能（e）{
var info=getProgressBarClickInfo（$（this），e）；
卷进度条（“值”，信息值）；
player.volume=info.value/info.max；
});
进度条({
值：player.currentTime，
});
进度条。单击（功能（e）{
var info=getProgressBarClickInfo（$（this），e）；
player.currentTime=player.duration/info.max*info.value；
});
播放按钮。单击（函数（）{
player[player.paused'play'：'pause']（）；
$（this.toggleClass（“fa play”，player.paused）；
$（this.toggleClass（“fa pause”，！player.paused）；
});
静音按钮。单击（功能（）{
如果（player.volume==0）{
player.volume=音量；
}否则{
音量=player.volume；
player.volume=0；
}
音量_bar.progressbar（'value'，player.volume*100）；
$（this.toggleClass（“fa volume up”，player.volume！=0）；
$（this.toggleClass（“fa音量关闭”，player.volume==0）；
});
更多信息。单击（函数（）{
音频播放器({
高度：（音频播放器高度（）=50）？100:50
}, 1000);
});
});
函数getTime（t）{
var m=~（t/60），s=~（t%60）；
返回（m<10？+0？+m:m）+'：'+（s<10？+0？+s:s）；
}
函数getProgressBarClickInfo（进度条，e）{
var offset=进度条offset（）；
var x=e.pageX-offset.left；//或e.offsetX（但支持较少）
var y=e.pageY-offset.top；//或e.offsetY
var max=进度条（“选项”、“最大值”）；
var值=（x*max）/progress_bar.width（）；
返回{x:x，y:y，max:max，value:value}；
}