Soundcloud自定义小工具:在没有waveform.js的情况下更改容器背景颜色？

Question

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

Answer 1

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

​

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

因此，除非你想要用于波形定制的库使用的是HTML5画布，否则你将无法使用它来改变该铬线的颜色(所以不能使用HTML5 Widget API或自定义播放器API)。而且你必须使用waveform.js或类似的工具(或者自己修改画布上的波形图像)。

您可以尝试使用最新的CSS滤镜(目前仅限webkit)和SVG滤镜，也可以尝试一些适用于较旧IE版本的MS IE滤镜，但我不确定您是否能设法更改颜色。

Answer 2

我遇到了同样的问题，并且以前也遇到过这个问题( 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);
});