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

【问题标题】：Change Tumblr audio player color with Javascript使用 Javascript 更改 Tumblr 音频播放器颜色
【发布时间】：2012-05-04 11:56:47
【问题描述】：

由于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} 标签，插入代码的音频播放器是白色的，所以我想改变它。我添加了两行（在代码中注释），它有点工作：播放器变成黑色，但所有控件都是不可见的。而不是预期的

我明白了

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

【问题讨论】：

从div 中删除background-color:white 样式会发生什么？
@kopischke 嘿！这些天你是我的英雄:) 它什么都不做，bg 是玩家周围的区域。我删除了代码并将其更改为黑色，以便您可以看到我所指的内容。 i.imgur.com/SDLWq.png
哦，对了，我明白了——它应该是黑色的……哼。您能否链接到实时代码（与上一个问题相同）？
@kopischke 是的，默认为白色我想将其更改为黑色，因此我从另一个主题中获取了代码，但它无法正常工作。当然！ js在这里dl.dropbox.com/u/13823768/masonry/js/script.js和实时页面在这里tmbeta.tumblr.com
将.replace("color=FFFFFF", "color=" + color) 更改为.replace("audio_player.swf", "audio_player_black.swf")。

标签： javascript flash tumblr

【解决方案1】：

Tumblr 音频播放器的配色方案不受请求 URL 中传递的颜色代码的约束，正如您所假设的那样，它是 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 的定义:)。

【讨论】：

【解决方案2】：

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

（没有到处检查，添加颜色而不是替换可能是错误的代码，但它似乎功能正常？）

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

【讨论】：