如何在不使用相同音頻 ID 的情況下播放從數據庫中獲取的多個音頻文件

Question

我在堆棧溢出時得到了這段代碼，這是一個自定義音頻播放器。 但是后來修改了代碼以從我的數據庫中獲取音頻。 我遇到的問題是只播放了從我的數據庫中獲取的第一首歌曲。

這是我的代碼，它顯示帶有控件的音頻

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

Answer 1

看起來您在每個播放、暫停按鈕上都使用了相同的 javascript/HTML ID。

例如。 如果您返回 3 首歌曲，那么 Javascript 中的 id 將出現 3 次...

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

因此，由於頁面上的 ID 只能創建一次，因此當您的 javascript 函數查找歌曲時，它會找到第一個 ID，獲取它的源並播放它。

我建議你：

1. 我可以看到你正在使用一個計數器。 將每個玩家 id 的 ID 更改為 player1、player2 等並引用，或

2. 讓您的播放器代碼按類而不是按 id 進行搜索。 例如。

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