Soundcloud修改波形颜色 [英] Soundcloud modify the waveform color

问题描述

我创建一个基于soundcloud的网站，我需要修改soundcloud波形颜色看起来像下面

我在soundcloud的博客中阅读，看起来像waveform.js会但仍然得到这样的

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

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

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

解决方案

您可以使用复合模式和裁剪的组合来实现这一点，而不迭代像素（这意味着CORS将不是这个例子中的问题） ：

现场示范动画

基本代码：

假设图片已加载，

  function loop（）{
 
 x ++; ///与实际进度同步
 
 ///因为我们将改变复合模式和剪辑：
 ctx.save（）; 
 
 /// clear background with black 
 ctx.fillStyle ='＃000'; 
 ctx.fillRect（0，0，w，h）; 
 
 ///删除波形，更改复合模式
 ctx.globalCompositeOperation ='destination-atop'; 
 ctx.drawImage（img，0，0，w，h）; 
 
 ///填充新的alpha，相同的模式，不同的区域。 
 ///这将删除我们需要剪切的任何东西
 ctx.fillStyle ='＃00a'; /// gradient 
 ctx.rect（0，0，x，h）; 
 ctx.clip（）; /// set clipping rect 
 ctx.fill（）; ///使用相同的rect填充
 
 ///删除剪辑并使用默认的复合模式
 ctx.restore（）; 
 
 ///循环直到结束
 if（x< w）requestAnimationFrame（start）; 
} 
  

如果要使未显示的波形具有不同的颜色，与背景。

I am creating a website based on soundcloud and i need to modify the soundcloud waveform color to look like the following

I read in the blog of soundcloud and it seemed like waveform.js will do the trick but still i am getting something like this

Can anyone let me know how can i get the exact same effect. I saw on soundcloud homepage they are doing same thing using canvas but i don't how exactly to do that. The image waveform returned from soundcloud api is as follows

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

Can anyone guide me the right way to achieve this.

解决方案

You can use a combination of composite mode and clipping to achieve this without iterating through pixels (which means CORS won't be a problem in this example):

LIVE DEMO ANIMATION

The essential code:

Assuming image has been loaded, canvas setup we are good to go:

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);
}

If you want the unplayed waveform to have a different color simply style the canvas element with a background.

这篇关于Soundcloud修改波形颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！