Динамический плейлист AJAX не воспроизводит песню - PullRequest
Новая
       5

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

3 голосов
/ 24 января 2012

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

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

Ответы [ 2 ]

2 голосов
/ 24 января 2012

Попробуйте 

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 голосов
/ 24 января 2012

Я предполагаю, что, поскольку вы заполняете список воспроизведения с помощью 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"
                }
            );
        }
...