声波云修改波形颜色

Question

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

​

​

我在soundcloud的博客上读到，似乎waveform.js会做到这一点，但我还是得到了这样的东西

​

​

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

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集成，则不能修改它。

别忘了跨域策略，否则就行不通了。