的SoundCloud修改波形颜色

我基础上的SoundCloud建立一个网站，我需要修改的SoundCloud波形颜色看起来像下面的SoundCloud修改波形颜色

How it should be

我的SoundCloud的博客阅读和它似乎像waveform.js会做的伎俩，但仍然我得到这样的事情

How it looks now

任何人都可以让我知道我怎样才能得到确切的效果相同。我在soundcloud的主页上看到他们使用画布做同样的事情，但我不知道如何去做。从SoundCloud API返回的图像波形如下

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

任何人都可以引导我正确的方式来实现这一目标。

来源

2013-10-23 Nirmal Ram

可以使用的复合模式和削波的组合来实现这一点，而无需通过像素迭代（这意味着CORS不会在这个例子中一个问题）：

Fiddle

Waveform progress

基本代码：

假设图像已经加载，画布设置，我们是好去：

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元素。

来源

2013-10-23 23:23:49 K3N

嗨，我想这会做的伎俩，但只有一个问题。进度条将是一个像'

'的div，宽度会随着歌曲的进度逐渐增加。有什么办法可以像这样做进度条吗？如果您需要查看我的网站，那么我可以向您发送网址。 –

-2

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

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

来源

2013-10-23 08:57:27 Defoncesko

不，我没有在iframe中使用soundcloud，我正在使用soundcloud api。 –

你想要做什么就像例子部分的第一个例子一样？ http://waveformjs.org/ – Defoncesko

不，在这种情况下，它们有黑色图像的白色背景。主要的是进度条。进展看起来不像是应该的，其余的都很好。 –

的SoundCloud修改波形颜色

回答

相关问题