Soundcloud自定义小部件：更改容器背景颜色没有波形.js？

Question

有没有办法在不加载waveform.js库的情况下从#efefef更改sc波形容器背景？我已经有足够的库加载，并且变换器bg与我们的站点背景颜色冲突

Answer 1

我遇到了同样的问题，之前遇到过这个问题（Overlay visible areas of transparent black silhouette PNG with pattern using CSS3 or JS）。

以下是波形示例：http://jsfiddle.net/eLmmA/3/

$(function() {
    var canvas = document.createElement('canvas');
    canvas.width = 1800; // must match 
    canvas.height = 280; // must match 

    var canvas_context = canvas.getContext("2d");

    var img = new Image();
    img.onload = function(){
        var msk = new Image();
        msk.onload = function(){
            canvas_context.drawImage(img, 0, 0);
            canvas_context.globalCompositeOperation = "destination-in";
            canvas_context.drawImage(msk, 0, 0);
            canvas_context.globalCompositeOperation = "source-over";
        };

        msk.src = 'WAVEFORM_IMAGE.EXT';
    }
    img.src = 'OVERLAY_IMAGE.EXT';

    document.body.appendChild(canvas);
});

Answer 2

我想我明白你的意思。您想要更改波形背景的颜色，波形周围的灰色部分：

这里的问题是，您从SoundCloud API获得的波形表示为部分透明的PNG图像，其中波形本身是透明的，并且其周围的铬是灰色（#efefef）颜色。

因此，除非您要用于波形自定义的库使用HTML5画布，否则您将无法使用更改该镶边的颜色（因此，不能使用HTML5 Widget API或自定义播放器API） 。你有使用waveform.js等（或自己修改画布上的波形图像）。

您可以尝试使用最新的CSS过滤器（目前仅适用于webkit）和SVG过滤器，以及可能的旧IE版本的某些MS IE过滤器，但我不确定您是否设法只更改颜色。