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() {

Solution 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 :).

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