Soundcloud修改波形颜色

Question

我正在创建一个基于soundcloud的网站，我需要修改soundcloud波形颜色，如下所示

我在soundcloud的博客中看到，看起来wave.js会起作用，但我仍然会得到这样的东西

任何人都可以让我知道我怎么能得到完全相同的效果。我在soundcloud主页上看到他们使用画布做同样的事情，但我不知道如何做到这一点。从soundcloud api返回的图像波形如下

http://w1.sndcdn.com/1m91TxE6jSOz_m.png

任何人都可以指导我实现这一目标的正确方法。

Answer 1

您可以使用复合模式和裁剪的组合来实现此目的，而无需迭代像素（这意味着CORS在此示例中不会出现问题）：

<强> Fiddle

基本代码：

假设图片已加载，画布设置我们很高兴：

function loop() {

    x++;        // sync this with actual progress

    // since we will change composite mode and clip:
    ctx.save();

    // clear background with black
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, w, h);

    // remove waveform, change composite mode
    ctx.globalCompositeOperation = 'destination-atop';
    ctx.drawImage(img, 0, 0, w, h);

    // fill new alpha, same mode, different region.
    // as this will remove anything else we need to clip it
    ctx.fillStyle = '#00a'; /// gradient
    ctx.rect(0, 0, x, h);
    ctx.clip();             /// set clipping rect
    ctx.fill();             /// use the same rect to fill

    // remove clip and use default composite mode
    ctx.restore();

    // loop until end
    if (x < w) requestAnimationFrame(start);
}

如果您希望“未播放”波形具有不同的颜色，只需使用background为canvas元素设置样式。

Answer 2

如果要将soundcloud与iframe集成，则无法对其进行修改。

不要忘记跨域策略，否则它将无效。