Change Tumblr audio player color with Javascript

问题

I'm forced to load the tumblr audio player in my theme via JavaScript because of this issue. The loading happens as follows:

$(window).load(function() {
    setTimeout(function() {                        
        $('.audio-player').each(function(){
            var audioID = $(this).parents(".audio").attr("id");
            var $audioPost = $(this);
            var color = "000000"; //new color
            $.ajax({
                url: '/api/read/json?id=' + audioID,
                dataType: 'jsonp',
                timeout: 50000,
                success: function(data){
                    if ($audioPost.html().indexOf("is required to") != -1) {
                        $audioPost.find('#audio_player_'+audioID).replaceWith('<div style=\"background-color:white;">' + data.posts[0]['audio-player'].replace("color=FFFFFF", "color=" + color) +'</div>'); //replace color here
                    }
                }
            });
        });
    }, 2000);
});

In spite of using the {AudioPlayerBlack} tag, the code-inserted audio player is white, so I want to change that. I added two lines (commented in the code) and it’s sort of working: the player becomes black but all the controls are invisible. Instead of the expected

I get this

You can inspect the live example here: http://tmbeta.tumblr.com/ (btw, testing for mobiles so you need to resize your window to make it less than 480px wide). This is the tumblr api for audio posts, just in case.

回答1:

The color scheme of the Tumblr audio players is not governed by the color code passed in the request URL, as you assume – it is part of the swf (Flash) file itself. To get the black player, you need to request audio_player_black.swf instead of the default (white) audio_player.swf. In your code, change the innermost code line to

$audioPost.find('#audio_player_'+audioID).replaceWith('<div style=\"background-color:white;">' + data.posts[0]['audio-player'].replace("audio_player.swf", "audio_player_black.swf") +'</div>');

and you should be good to go. You can also get rid of the color definition, of course :).

回答2:

I dunno if this is appropriate but if anyone's trying to simply change the background color of a standard tumblr audio player i have found this simple code to work.

(Haven't checked it everywhere, adding the color instead of replacing might be bad code but it seems to function fine?)

$('iframe.tumblr_audio_player').each(function(){
    var audio = $(this).attr('src')
    $(this).attr('src', audio + '&color=e84d37'); // replace w/ hex of whatever color
});

来源：https://stackoverflow.com/questions/10448400/change-tumblr-audio-player-color-with-javascript

标签

javascript

flash

tumblr