如何在不使用相同音频 ID 的情况下播放从数据库中获取的多个音频文件

Question

I got this code here on stack overflow which is a custom audio player. But then modified the code to fetch audio from my database. The problem am having is only the first song gotten from my database is been played.

This is my code that displays the audio with the controls

            <?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++;
           }
           ?>

This is my javascript code responsible for playing the audio

 $(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 };
   }

Answer 1

It looks like you're using the same javascript/HTML ID on each of the play, pause buttons.

Eg. if you're returning 3 songs, then the id within Javascript will be appearing 3 times...

<audio ... id="player">
<audio ... id="player">
<audio ... id="player">

So, as an ID on a page can only be created once, when your javascript function goes to find the song, it finds the first ID, gets it's the source and plays it.

I'd suggest that you either:

1. I can see you're using a counter. Change the ID of each player id to be player1, player2, etc and refer to that, OR

2. Get your player code to search by class instead of by id. Eg.

   var player = $('.podcast-audio')[0][0];