Soundcloud custom widget : change container background color w/o waveform.js?

Question

Is there any way to change the sc-waveform container background from #efefef without having to load the waveform.js library? I have enough libraries loading already and the conainer bg conflicts with our site background color

Answer 1

I am experiencing the same issue and have had this problem before ( Overlay visible areas of transparent black silhouette PNG with pattern using CSS3 or JS ).

Here is an example with your waveform: 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

I think I understand what you mean. You want to change the color of the waveform background, the gray stuff around the waveform:

The problem here is that waveforms you get from SoundCloud API are represented as partly transparent PNG images, where waveform itself is transparent and the chrome around it is gray (#efefef) color.

So, unless the library you want to use for waveform customisation is using HTML5 canvas, you won't be able to use change the color of that chrome (so no, not possible with either HTML5 Widget API or Custom Player API). And you have to use waveform.js or the likes (or modify the waveform image on canvas yourself).

You could try to experiment with newest CSS filters (webkit only for now) and SVG filters, and possibly some MS IE filters for older IE versions, but I am not sure you'd manage to just change the color.