Question

由于this issue，我被迫通过JavaScript在我的主题中加载tumblr音频播放器。加载发生如下：

$(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);
});

尽管使用了{AudioPlayerBlack}标签，但代码插入的音频播放器是白色的，所以我想改变它。我添加了两行（在代码中注释）并且它有点工作：播放器变黑但所有控件都是不可见的。而不是预期的

regular black player

我明白了

JavaScript loaded black player

您可以在此处查看实时示例：http://tmbeta.tumblr.com/（顺便说一句，测试手机，因此您需要调整窗口大小以使其小于480px宽）。这是tumblr api for audio posts，以防万一。

Answer 1

Tumblr音频播放器的配色方案不受请求网址中传递的颜色代码的约束，正如您所假设的那样 - 它是swf（Flash）文件本身的一部分。要获得黑色播放器，您需要audio_player_black.swf而不是默认（白色）audio_player.swf。在您的代码中，将最里面的代码行更改为

$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>');

你应该好好去。你也可以摆脱color的定义，当然:)。

Answer 2

我不知道如果这是合适的，但如果有人试图简单地改变标准tumblr音频播放器的背景颜色，我发现这个简单的代码可以工作。

（Haven在任何地方都检查过它，添加颜色而不是替换可能是错误的代码，但似乎功能正常？）

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

使用Javascript更改Tumblr音频播放器颜色

2 个答案: