0

Waveform.js ライブラリをロードせずに、sc-waveform コンテナーの背景を #efefef から変更する方法はありますか? すでに十分な数のライブラリがロードされていますが、conainer bg がサイトの背景色と競合しています

4

2 に答える 2

2

私は同じ問題を経験しており、以前にもこの問題が発生しました（CSS3 または JS を使用したパターンで透明な黒いシルエット PNG の可視領域をオーバーレイします）。

波形の例を次に示します: 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);
});
于 2015-01-04T19:59:27.240 に答える
1

私はあなたが何を意味するか理解していると思います。波形の背景の色、波形の周りの灰色のものを変更したい：

典型的な波形

ここでの問題は、SoundCloud API から取得した波形が、部分的に透明な PNG 画像として表され、波形自体が透明で、その周りのクロムが灰色 ( #efefef) になっていることです。

そのため、波形のカスタマイズに使用するライブラリが HTML5 キャンバスを使用していない限り、そのクロムの色を変更することはできません (HTML5 Widget API または Custom Player API では不可能です)。そして、waveform.js などを使用する必要があります (またはキャンバス上の波形イメージを自分で変更します)。

最新の CSS フィルター (現時点では webkit のみ) と SVG フィルター、および古い IE バージョン用の MS IE フィルターを試してみることもできますが、色を変更するだけでうまくいくかどうかはわかりません。

于 2013-02-06T14:36:50.203 に答える