jquery - Soundcloud 修改波形颜色

Question

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

我在 soundcloud 的博客中读到，似乎waveform.js 可以解决问题，但我仍然得到这样的东西

谁能让我知道我怎样才能得到完全相同的效果。我在 soundcloud 主页上看到他们正在使用画布做同样的事情，但我不知道该怎么做。soundcloud api返回的图像波形如下

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

谁能指导我实现这一目标的正确方法。

Answer 1

您可以使用复合模式和剪辑的组合来实现这一点，而无需遍历像素（这意味着 CORS 在此示例中不会成为问题）：

小提琴

基本代码：

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

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.

Answer 2

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

不要忘记跨域策略，否则将不起作用。