的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修改波形顏色

回答

相關問題