3

Webアプリ用の音楽プレーヤーを作成しています。ユーザーがmp3ファイルをサーバーにアップロードした後、データベースへのAJAX呼び出しを介してプレイリストが自動的に生成されます。私はここで良いシンプルなjqueryプラグイン音楽プレーヤーを見つけました

このようにHTMLにファイル参照を手動で含めると完璧に機能します。

<div id="playlist">
                <div href="./media/Maria (Extended remix) - Blondie .mp3" style="width: 400px;" class="item">
            <div>
                <div class="fr duration">02:06</div>
                <div class="btn play"></div>
                <div class="title"><b>Blondie</b> - Maria</div>
            </div>
            <div class="player inactive"></div>
        </div>

しかし、サーバーには100個の.mp3ファイルがあるため、これは私にとっての解決策ではありません。そこで、ajax呼び出しを介してファイルリストを生成し、jqueryを使用して#playlistに配置することにしました。このように ：

function refresh_song_list()
{
    $.ajax({
        type: 'GET',
        url: 'profile/get_song',
        dataType: 'json',
        success: function(data) {
            var str='';
            for(i=0;i<data.length;i++)
            {
                str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>');   
            }
            $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div
        }
    }); 
}

次に、プレイリストを再生可能にするために、このコードを（プラグインの指示に従って）jqueryドキュメントの準備完了スコープに配置します。

$("#playlist").playlist(
                {
                    playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf"
                }
            );

問題は、各アイテムの再生ボタンでプレイリストが正常に読み込まれるが、曲が再生されないことです。私のコードに間違いはありますか？みんな助けてください。ありがとう

4

2 に答える 2

2

私の推測では、プレイリストにajaxを入力しているため、.playlist()初期化子はそれらの要素がまだ存在していないため、それらの要素を認識しません（あなたが述べているようにドキュメントレディスコープで）。

代わりに、.playlist()ajaxコールバックを呼び出します。

       success: function(data) {
            var str='';
            for(i=0;i<data.length;i++)
            {
                str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>');   
            }
            $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div

            $("#playlist").playlist(
                {
                    playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf"
                }
            );
        }
于 2012-01-24T18:30:31.223 に答える
2

試す

function refresh_song_list()
{
    $.ajax({
        type: 'GET',
        url: 'profile/get_song',
        dataType: 'json',
        success: function(data) {
            var str='';
            for(i=0;i<data.length;i++)
            {
                str = str + ('<div href="'+ data[i][song_url]+'" style="width: 400px;" class="item"><div><div class="fr duration">02:06</div><div class="btn play"></div><div class="title"><b>'+ data[i]['artist']+'</b> '+ data[i]['song_title'] +'</div></div><div class="player inactive"></div></div>');   
            }
            $('#playlist').html(str); //this line add the songlist(playlist) into the #playlist div
            bindPlaylist();

        }
    }); 
}



function bindPlaylist()
{

$("#playlist").playlist(
                {
                    playerurl: "js/jquery/jquery-plugins/drplayer/swf/drplayer.swf"
                }
            );

}
于 2012-01-24T18:32:26.773 に答える