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 SCRIPT關閉：

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

} 

這裏是獲取歌曲的名稱藝術家和URL

的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

我建議測試這段代碼。當DOM被加載時，current_clicked_item庫存第一個 .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" 
    }); 

}