Динамический плейлист AJAX не будет воспроизводить песню

Я делаю музыкальный плеер для своего веб-приложения. После того, как пользователь загрузит на сервер 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>


Но это не решение для меня, потому что на сервере есть сотни mp3-файлов . Итак, я решил сгенерировать список файлов с помощью вызова ajax и поставить это в плейлист #с jquery. Как этот: 

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"

                }

            );


Проблема в том, что плейлист успешно загружается с помощью кнопки воспроизведения на каждом элементе, но он не воспроизводит песню. Есть ли какая-нибудь ошибка в моем коде? пожалуйста, помогите мне, ребята. Спасибо

675   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"
                }
            );
        }
2  
2012-01-24 20:30:31

Попробуйте 

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

}
2  
2012-01-24 20:32:26

Comments

    Ничего не найдено.
Click here to cancel reply.