웨이브 폼으로 다시 그리기 캔버스

Question

나는 사운드 클라우드 플레이어와 같은 사운드 플레이어를 만들어야합니다. 그래서 내가 이 부분이 잘 작동하고 waveformjs.org jQuery 라이브러리에 사용하기위한 JSON 데이터를 구축하고,이 같은 내 이미지의 캔버스가하는 우분투 기반의 소프트웨어를 사용 :

waveform = new Waveform({ 
    container: document.getElementById("test"), 
    data: newJ, 
    innerColor:"#f60", 
}); 

을하지만 문제는 음악 재생 프로세스 상태를 보여야 만합니다. 사운드 클라우드마다 같은 초

당신은 내가이 부분을 구현할 수있는 방법을 알고 ... 캔버스 색상의 일부가 변경해야하지만,이 부분에 대한 wavweforjs의 내부 함수 ( optionsForSyncedStream는) 나를 위해 일 해달라고! 또한 수동으로 캔버스를 다시 칠하는 방법은 어떻습니까 ??? x 및 y 위치로 익사 캔버스의 일부 색상을 변경할 수 있습니까?

는 waveformjs 플러그인의 일부를 변경하는 innerColor를 사용하는 당신에게 그것의 가능한

Answer 1

감사드립니다. 이것에 대한

을 수행해야합니다

다음

innerColor: function(x, y){ 
if (typeof(i)=='undefined'){i=0;} 
i++; 
    if(i>audioElement.currentTime){ 
     return 'gray'; 
    }else{ 
     return '#f60'; 
    } 
} 

모든 X의 초 위치를 확인하고이 같은 파형을 업데이트해야합니다

setInterval(function(){ 
    waveform.update({data:data}); 
    i=0; 
}, 100); 

이 깨끗한 방법이 아니다하지만 내 결국 좋은 작업 ..

Answer 2

좀 더 자세한 정보 : 새 Waveform을 처음 만들 때 내부 함수에 사용자 지정 함수를 전달할 수 있습니다.

Waveform.js 라이브러리의 source을 살펴보면 innerColor 함수를 전달했는지 확인하고, 그렇다면 함수에 몇 가지 항목을 전달하여 색상을 생성합니다 :

// The source is in Coffeescript 
i = 0 
for d in @data 
    t = @width/@data.length 
    // This line is the one I'm referring to... 
    @context.fillStyle = @innerColor(i/@width, d) if typeof(@innerColor) == "function" 
    @context.clearRect t*i, middle - middle * d, t, (middle * d * 2) 
    @context.fillRect t*i, middle - middle * d, t, middle * d * 2 
    i++ 

그래서 본질적 파형 (개시로부터 백분율로 표시) 라인의 위치 (검색 innerColor 함수에 전달 된) 파형과 i/@width 각 '라인'루프를 통해 그 그들은 현재 색을 그리려하고 있습니다.

waveform = new Waveform({ 
    container: document.getElementById('waveform'), 
    innerColor: function(percentageOfWaveform, d) { 
    // We don't need d 
    var songPercentage = yourAudioElement.currentTime/yourAudioElement.duration; 
    if (percentageOfWaveform > songPercentage) { 
     return 'gray'; 
    } else { 
     return '#f60'; 
    } 
    } 
}); 

는 그런 다음에 어떤 로직을 작성해야합니다 : 오디오 트랙의 currentTime 해당 번호 아래/위의 경우 그 비율을 가지고 파악하면 '라인'과 같은 특정 색상을 제공 할 수 있습니다 파형을 업데이트 할 때마다 너무 자주 다시 그리십시오.

waveform.redraw() 

*이 SDK의 표준 SC.stream 방법과 반대로 내가 HTML5 오디오를 사용하고 있음을 주목해야한다

, 그래서 yourAudioElement는 HTML5 오디오 요소입니다.