0

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

}

そして、これが曲の名前のアーティストと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;

     }

}

?>
4

1 に答える 1

0

このコードをテストすることをお勧めします。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"
    }); 

}
于 2013-09-25T08:27:21.830 に答える