Jplayer - Create a dynamic playlist from Mysql results

Question

I have a list of songs generated by a mysql search, I can get the song to play when I click on the play image (play_overlay.png). When the song has finished playing I would like Jplayer to play the next song in the the mysql result array. I can't get that to work ...

Thank you for your help !

Here is the mysql and html code

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

Here is the javascipt function for Jplayer:

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

}

And here is the getsong.php that is getting the song's name artist and url

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

I suggest to test this code. The current_clicked_item stock the first .jp-play1 element when the DOM is loaded. When the user click on a link, we override this value by the current clicked element. When the song is ending, we jump to the next / first element

    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"
    }); 

}