jquery - 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_labelx22x3e' + data.posts[0]['video-player'] +'x3c/divx3e');
                    }
                }
            });
        });  

        /* 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_playerx22x3e' + data.posts[0]['audio-player'] +'x3c/divx3e');
                    }
                }
            });
        }); 

        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

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_playerx22x3e' + data.posts[0]['audio-player'].replace("audio_player.swf","audio_player_black.swf") +'x3c/divx3e');
                }
            }
        });

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.