tumblr audio/video players + Masonry with infinite scroll

Question

Here's a test page: http://masonry-test.tumblr.com/

I'm using jquery Masonry with infinite scroll on tumblr. All is fine except with audio players. They won't load on the second page and display this message instead [Flash 9 is required to listen to audio.].

Did a little research and found a solution. One here (this one too) and here's the js from the Mesh theme that does that successfully (line 35).

Problem is I don't know where and how to implement it in my code. Everything I tried either wasn't working or it left a small gap around the masonry blocks. My code:

    $(document).ready(function () {

    var $container = $('.row');

    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.post',
            columnWidth: 1
        });
    });


    $container.infinitescroll({
        navSelector: '#page-nav',
        nextSelector: '#page-nav a',
        itemSelector: '.post',
        loading: {
            finishedMsg: "No more entries to load.",
            img: "http://static.tumblr.com/7wtblbo/hsDlw78hw/transparent-box.png",
            msgText: "Loading..."
        },
        debug: true,
        bufferPx: 5000,
        errorCallback: function () {
            $('#infscr-loading').animate({
                opacity: 0.8
            }, 2000).fadeOut('normal');
        }
    },

    function (newElements) {

    //tried this but doesn't work

        /* repair video players*/
        $('.video').each(function(){
            var audioID = $(this).attr("id");
            var $videoPost = $(this);
            $.ajax({
                url: '/api/read/json?id=' + audioID,
                dataType: 'jsonp',
                timeout: 50000,
                success: function(data){
                    $videoPost.append('\x3cdiv class=\x22video_player_label\x22\x3e' + data.posts[0]['video-player'] +'\x3c/div\x3e');
                    }
                }
            });
        });  

        /* repair audio players*/
        $('.audio').each(function(){
            var audioID = $(this).attr("id");
            var $audioPost = $(this);
            $.ajax({
                url: '/api/read/json?id=' + audioID,
                dataType: 'jsonp',
                timeout: 50000,
                success: function(data){
                    $audioPost.append('\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
                    }
                }
            });
        }); 

        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });
            $container.masonry('appended', $newElems, true);
        });
    });


    $(window).resize(function () {
        $('.row').masonry();
    });

});

Answer 1

I noticed a few things and this is what I advise you to try:

1. For that script to work, the elements with the class "audio" should each have an "id" attribute with the post ID. The HTML should look like that:

   <div class="audio" id={PostID}>{AudioPlayerWhite}</div>
   

   Tumblr will automatically fill the {PostID} part with the ID for each post. I suppose it works in the same manner for videos (haven't tried it with videos yet).

2. As for position, I did it like this:

   function (newElements) {
   
      ....
   
      $newElems.imagesLoaded(function () {
          ....
      });
   
      //audio repair goes here!
   
   }
   

Answer 2

By default the API will return a white audio player. you can change it by using the jQuery method to replace the flash player with a black or white player respectively.

.replace("audio_player.swf", "audio_player_black.swf")

or simply change the color itself

.replace("color=FFFFFF", "color=EA9D23");

Example:

$('.audio').each(function(){
        var audioID = $(this).attr("id");
        var $audioPost = $(this);
        $.ajax({
            url: '/api/read/json?id=' + audioID,
            dataType: 'jsonp',
            timeout: 50000,
            success: function(data){
                $audioPost.append('\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'].replace("audio_player.swf","audio_player_black.swf") +'\x3c/div\x3e');
                }
            }
        });

I had a lot of trouble with this and hope it helps someone out. I found the above information here Change Tumblr audio player color with Javascript.

Answer 3

Here is a solution I came up with when I needed to implement the same functionality in the template I was creating.

In your HTML, include your AudioPlayer Tumblr tag between comments. This is to prevent loaded scripts from being called. Also add a class "unloaded" to keep track whether or not we've loaded the audio player for this post or not.

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

If you look at the commented code after the page is loaded, you will notice an embed tag being passed to one of the Tumblr javascript functions. Since we commented it, it will not execute. Instead we will want to extract this string and replace the div contents with it.

Create a javascript function which will do this. This can be done with regular javascript, but to save time I will do it with jQuery since this is how I did it for my template:

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

Call loadAudioPosts() once on page load, then every time your infinite scrolling loads additional posts.