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

Posted 2023-02-24

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

【英文标题】：How can i play multiple audio file gotten from a database without using same audio id

【发布时间】：2020-09-20 08:03:20

【问题描述】：

我在堆栈溢出时得到了这段代码，这是一个自定义音频播放器。但随后修改了代码以从我的数据库中获取音频。我的问题是只播放了从我的数据库中获取的第一首歌曲。

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

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

【参考方案1】：

看起来您在每个播放、暂停按钮上都使用了相同的 javascript/html ID。

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

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

因此，由于页面上的 ID 只能创建一次，当您的 javascript 函数去查找歌曲时，它会找到第一个 ID，获取它的来源并播放它。

我建议你：

我可以看到您正在使用计数器。将每个玩家 id 的 ID 更改为 player1、player2 等并引用它，或者

让您的播放器代码按类别而不是 id 进行搜索。例如。

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