Jplayer - 从 Mysql 结果创建动态播放列表

Question

我有一个 mysql 搜索生成的歌曲列表，当我点击播放图像 (play_overlay.png) 时，我可以播放歌曲。歌曲播放完毕后，我希望 Jplayer 播放 mysql 结果数组中的下一首歌曲。我无法让它工作......

感谢您的帮助！

这里是mysql和html代码

        while($results = mysql_fetch_array($raw_results)){
        // $results = mysql_fetch_array($raw_results) puts data from database into array, while it's valid it does the loop

        echo '<tr>';
        echo'<td>'. ucfirst($results['song_name']).'</td>';
        echo'<td>'. ucfirst($results['song_artist']).'</td>';
        //echo'<td>'. ucfirst($results['song_album']).'</td>';

            echo '<td>';
            echo '<a href="'.ucfirst($results['song_url']).'" class="jp-play1"> <img src="images/play_overlay.png"></a>';
            echo '</td>'; 
            echo '</tr>';

Jplayer 的 javascipt 函数如下：

$(document).ready(function(){

    readMP3("test_1.mp3");// play one mp3 if document is loaded

    $(".jp-play1").click(function(event){
        event.preventDefault();
        readMP3($(this).attr("href"));
    })


function readMP3(_src){
 $("#jquery_jplayer_1").jPlayer("destroy");

 $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            var data = $.ajax({
                type:'POST',
              url: "getsong.php",
              data: {'myval': _src },
              async: false
             }).responseText;

            var string = data.split('|');
            $(this).jPlayer("setMedia", {
                mp3: string[0]
            }).jPlayer("play");

            $('#artist').html(string[1]);
            $('#songname').html(string[2]);
        },
        ended: function (event) {  
            var data = $.ajax({
              url: "getsong.php",
              async: false
             }).responseText;

            var string = data.split('|');
            $(this).jPlayer("setMedia", {
                mp3: string[0]
            }).jPlayer("play");

            $('#artist').html(string[1]);
            $('#songname').html(string[2]);
        },
        swfPath: "js",
        supplied: "mp3"
    }); 

}

这是获取歌曲名称艺术家和网址的getsong.php

<?php

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){ 

 mysql_connect("", "", "") or die("Error connecting to database: ".mysql_error());
 mysql_select_db("") or die(mysql_error());
    /* tutorial_search is the name of database we've created */ 

    $myval = $_POST['myval'];
    $myval1 = htmlspecialchars($myval);

     $raw_results = mysql_query("SELECT * FROM song_main
            WHERE (`song_url` LIKE '%".$myval1."%') " ) or die(mysql_error());



              while($results = mysql_fetch_array($raw_results)){
            // $results = mysql_fetch_array($raw_results) puts data from database into array, while it's valid it does the loop

    $artist = $results['song_artist'];
    $songname = $results['song_name'];
    $url = $myval;
    $separator = '|';
    echo $url.$separator.$artist.$separator.$songname;

     }

}

?>

Answer 1

我建议测试这段代码。 current_clicked_item 库存第一 加载 DOM 时的 .jp-play1 元素。当用户点击一个 链接，我们用当前点击的元素覆盖这个值。当。。。的时候 歌曲结束，我们跳到下一个/第一个元素

    var current_clicked_item = $(".jp-play1").eq(0);

    readMP3("test_1.mp3");// play one mp3 if document is loaded

    $(".jp-play1").click(function(event){
        current_clicked_item = $(this);
        event.preventDefault();
        readMP3($(this).attr("href"));
    })



function readMP3(_src){

    $("#jquery_jplayer_1").jPlayer("destroy");

    $("#jquery_jplayer_1").jPlayer({
      ready: function () {
          var data = $.ajax({
              type:'POST',
            url: "getsong.php",
            data: {'myval': _src },
            async: false
           }).responseText;

          var string = data.split('|');
          $(this).jPlayer("setMedia", {
              mp3: string[0]
          }).jPlayer("play");

          $('#artist').html(string[1]);
          $('#songname').html(string[2]);
      },
      ended: function (event) {
          if (current_clicked_item.index() < $(".jp-play1").length - 1)
          {
              $(".jp-play1").eq(current_clicked_item.index() + 1).trigger('click'); // play next song
          }
          else
          {
              $(".jp-play1").eq(0).trigger('click'); // play first song
          }
      },
      swfPath: "js",
      supplied: "mp3"
    }); 

}