Question

我一直在尝试为个人网站制作音频播放器（我正在为自己制作像kodi之类的东西），但是在播放歌曲时遇到了问题。

在我的数据库（PHPMyAdmin）中，我有2行带有2个文件路径，可导致2个不同的mp3文件。

HTML代码

  <div class="music-playlistcutter">
<table class="table-expand">
  <tbody>
    <?php
      include_once 'includes/dbh.php';
      $sql = "SELECT * FROM music;";
      $stmt = mysqli_stmt_init($conn);
      if (!mysqli_stmt_prepare($stmt, $sql)) {
          echo "SQL statement failed!";
      } else {
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);
        while ($row = mysqli_fetch_assoc($result)) {
          echo '
          <tr onclick="selectSong(); playSong();" class="table-expand-row play" data-open-details>
            <td width="80"><center>   <img src="img/cover.jpg" width="40px"></center></td>
            <td id="songi2" width="350">'.$row["MusicTitle"].'</td>
            <td width="350">'.$row["MusicArtist"].'</td>
            <td>'.$row["MusicAlbum"].'</td>
            <td>'.$row["MusicBitRate"].' kbit/s</td>
            <td>'.$row["MusicFrequency"].' Hz</td>
          </tr>';
        }
      }
    ?>
  </tbody>
</table>

JavaScript代码

      <script type="text/javascript">
    var cs = document.getElementById('songi2').innerHTML;
    var songTitle = document.getElementById("songTitle").innerHTML;
    var songs = ["media/music/"+ cs +".mp3"];
    var fillBar = document.getElementById("fill");
    var song = new Audio();
    var currentSong = 0;

    function playSong(){
      song.src = songs[currentSong];
      songTitle.textContent = songs[currentSong];
      song.play();
    }

    function playOrPauseSong(){
      if(song.paused){
        song.play();
        $("#play img").attr("src","Pause.png");
      } else {
        song.pause();
        $("#play img").attr("src","Play.png");
      }
    }

    song.addEventListener('timeupdate',function(){
      var position = song.currentTime / song.duration;

      fillBar.style.width = position * 100 +'%';
    });

    function next(){
      currentSong++;

      if(currentSong > 2){
        currentSong = 0;
      }

      playSong();
      $("#play img").attr("src","Pause.png");
      $("#image img").attr("src",poster[currentSong]);
      $("#bg img").attr("src",poster[currentSong]);
    }

    function pre(){
      currentSong--;

      if(currentSong < 0){
        currentSong = 2;
      }

      playSong();
      $("#play img").attr("src","Pause.png");
      $("#image img").attr("src",poster[currentSong]);
      $("#bg img").attr("src",poster[currentSong]);
    }
  </script>

该代码从数据库中检索所有内容，它显示所有歌曲的播放列表，我也可以单击表格并播放歌曲。问题是只有FIRST歌曲可以播放，代码完全忽略了其他歌曲。如果单击乐曲1，则播放乐曲1。如果单击乐曲2，则乐曲1会再次播放。我猜是因为id="songi2"造成的，但我不知道如何解决。

使它起作用的方法是，首先从数据库中的音乐表中检索所有数据。

表格行是可单击的，单击时将播放选定的歌曲。

JS代码var cs = document.getElementById('songi2').innerHTML;抓取id="songi2"（音乐名称）。

JS代码var songs = ["media/music/"+ cs +".mp3"];使用先前的变量cs（音乐名称），它可以是“ Demo”或其他任何形式。最终结果将是demo.mp3文件的完整路径，例如：“ media / music / demo.mp3”。

介意吗？

还...是否有一种无需数据库就可以制作功能性HTML音频播放器的方法？我知道这段代码无需数据库即可工作，您可以将完整的文件路径放在var songs中，但这意味着拥有800多个文件路径，并且每当我有新歌曲时就手动更改代码。它不是自动化的，不是很好...如果有一种方法可以完全自动化，请指导我。

对不起，我的英语水平，并感谢您阅读...

使用HTML / PHP / JS播放MP3文件

0 个答案: