사운드 클라우드는

Question

나는 사운드 클라우드 기반의 웹 사이트를 만드는 오전 파형 색상을 수정하고 나는 사운드 클라우드의 블로그에서 읽은 다음

처럼 보이게하기 위해 사운드 클라우드 파형 색상을 수정해야하며 보였 waveform.js 누군가가 나에게 내가 동일한 효과를 얻을 수있는 방법을 알려 주시기 바랍니다이

같은 트릭하지만 여전히 내가 무엇입니까 뭔가를 할 것입니다. 사운드 크라우드 홈페이지에서 캔버스를 사용하여 똑같은 일을하고있는 것을 보았습니다.하지만 정확히 어떻게 할 것인가는 아닙니다.

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

사람이 나에게 이것을 달성 할 수있는 올바른 방법을 안내 할 수 다음과 같이 사운드 클라우드 API에서 반환 된 이미지의 파형이다.

Answer 1

넌 (CORS이 예에서 문제되지 않음을 의미한다)의 화소를 반복하지 않고 이것을 달성하는 복합 모드 및 클리핑의 조합을 사용할 수

Fiddle

필수 코드 :

가정하면 이미지가로드 된, 우리가 좋은 캔버스 설정이 이동 :

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과 통합하는 경우 수정할 수 없습니다.

도메인 간 정책을 잊지 마세요. 그렇지 않으면 작동하지 않습니다.