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 loa

Answer 1

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}
    

        
    
{/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  element from the commented {AudioPlayer...} tag.
        var new_html = $(this).html().substring(
            $(this).html().indexOf("")+2   // End at "d>", for "..."
        );

        // 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.