Аудиоплеер Tumblr не загружается с бесконечной прокруткой

Я реализовал бесконечную прокрутку вместе с каменной кладкой на этом tumblr: [проверьте версию для ссылки]

Аудиоплеер не отображается в сообщениях, загруженных с помощью бесконечной прокрутки, вместо этого он отображает текст «[Для прослушивания аудио требуется Flash 9.]».

Тема Tumblr Inspire Well (я не могу опубликовать другую гиперссылку, но вы можете легко ее найти в Google), похоже, решила эту проблему с помощью этого кода:

if(InspireWell.infiniteScrolling && InspireWell.indexPage){
  $masonedColumn.infinitescroll({
    navSelector  : 'ul.page_nav',  // selector for the paged navigation 
    nextSelector : 'ul.page_nav li.page_next a',  // selector for the NEXT link (to page 2)
    itemSelector : '.post',     // selector for all items you'll retrieve
    loadingImg : '',
    donetext  : 'No more pages to load.',
    errorCallback: function() { 
      // fade out the error message after 2 seconds
      //$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
    }
  },
  // call masonry as a callback
  function( newElements ) { 

    $(newElements).css({ visibility: 'hidden' });

    $(newElements).each(function() {
      if($(this).hasClass("audio")){
        var audioID = $(this).attr("id");
        var $audioPost = $(this);
        $audioPost.find(".player span").css({ visibility: 'hidden' });

        var script=document.createElement('script');
        script.type='text/javascript';
        script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";

        $("body").append(script);

        $.ajax({
        url: "http://thetestinggrounds.tumblr.com/api/read/json?id=" + audioID,
          dataType: "jsonp",
          timeout: 5000,
          success: function(data){
            $audioPost.find(".player span").css({ visibility: 'visible' });
            $audioPost.find("span:first").append('<script type="text/javascript">replaceIfFlash(9,"audio_player_' + audioID + '",\'\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e\')</script>');
          }
        });
      }
    });

Я попытался адаптировать это для своего tumblr (с текстом-заполнителем, чтобы увидеть, находит ли он правильный элемент):

 $(window).load(function(){
   $('#allposts').masonry({
     singleMode: true,
     itemSelector: '.box' 
   });
   $('#allposts').infinitescroll({
     navSelector : "div.navigation",
     nextSelector : "div.navigation a:first",
     itemSelector : ".box",
     debug : true
   },
     function( newElements ) {
       $(this).masonry({ appendedContent: $( newElements ) });
       $(newElements).each(function(){
         if($(this).hasClass("audio")){
           var audioID = $(this).attr("id");
       var $audioPost = $(this);
       $audioPost.find(".audio span");
           var script=document.createElement('script');
           script.type='text/javascript';
           script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";
           $("body").append(script);
       $.ajax({
         url: "http://fuckyeahempathy.tumblr.com/api/read/json?id=" + audioID,
     dataType: "jsonp",
     timeout: 5000,
     success: function(data){
       $audioPost.find(".audio span");
       $audioPost.find("span:first").append("<p>audio player not working</p>");
         }
       });
         }
       });
     }
   ); 
});

Но нет никаких признаков текста. Любая помощь будет принята с благодарностью.


audio-player tumblr
person Grant    schedule 18.11.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вот решение, которое я придумал, когда мне нужно было реализовать ту же функциональность в шаблоне, который я создавал.

Вставьте тег AudioPlayer Tumblr в свой HTML-код между комментариями. Это сделано для предотвращения вызова загруженных скриптов. Также добавьте класс «unloaded», чтобы отслеживать, загрузили ли мы аудиоплеер для этого поста или нет.

...
{block:AudioPlayer}
    <div class="audio-player unloaded">
        <!--{AudioPlayerBlack}-->
    </div>
{/block:AudioPlayer}
...

Если вы посмотрите на закомментированный код после загрузки страницы, вы заметите, что тег внедрения передается одной из функций javascript Tumblr. Поскольку мы его закомментировали, он не будет выполняться. Вместо этого мы хотим извлечь эту строку и заменить ею содержимое div.

Создайте функцию javascript, которая сделает это. Это можно сделать с помощью обычного javascript, но для экономии времени я сделаю это с помощью jQuery, так как я сделал это для своего шаблона:

function loadAudioPosts() {
    // For each div with classes "audio-player" and "unloaded"
    $(".audio-player.unloaded").each(function() {

        // Extract the <embed> element from the commented {AudioPlayer...} tag.
        var new_html = $(this).html().substring(
            $(this).html().indexOf("<e"),    // Start at "<e", for "<embed ..."
            $(this).html().indexOf("d>")+2   // End at "d>", for "...</embed>"
        );

        // Replace the commented HTML with our new HTML
        $(this).html(new_html);

        // Remove the "unloaded" class, to avoid reprocessing
        $(this).removeClass("unloaded");
    });
}

Вызовите loadAudioPosts() один раз при загрузке страницы, а затем каждый раз, когда ваша бесконечная прокрутка загружает дополнительные сообщения.

person Daniel    schedule 15.10.2012

arrow_upward
1
arrow_downward

HTML

<div class="audio" id="{postID}">{AudioPlayerBlack}</div>

css

.audio {
        height:30px;
        overflow-y: hidden;
    }
.audio span {
        display:none;
    }

Джава

setTimeout(function() {
                        $wall.masonry({ appendedContent: $(newElements) });
                        /* repair audio players*/
                        $('.audio').each(function(){
                            var audioID = $(this).attr("id");
                            var $audioPost = $(this);
                            $.ajax({
                                url: 'http://yoolk.tumblr.com/api/read/json?id=' + audioID,
                                dataType: 'jsonp',
                                timeout: 50000,
                                success: function(data){
                                    $audioPost.append('\x3cdiv style=\x22background-color:white;height:30px\x22 class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
                                }
                            });
                        });


                    }, 2000);
person yoolk    schedule 08.02.2011
comment
Йолк, извини, если я глуп, но не мог бы ты объяснить свой ответ немного подробнее? Как можно решить эту проблему? - person ; 08.02.2011