Trình phát Tuỳ chỉnh Soundcloud với Waveform.js và chức năng chà sàn

Question

Tôi đang làm việc trên trình phát Soundcloud tùy chỉnh cho trang web của mình bằng cách sử dụng waveform.js để tạo dạng sóng. Nó hoạt động rất tốt nhưng thiếu chức năng lọc. Làm thế nào tôi có thể thêm điều đó?

Tôi không phải là một thuật sĩ JS, vẫn học cách của tôi xung quanh vì vậy tôi sẽ rất biết ơn đối với bất kỳ trợ giúp hoặc gợi ý!

Cập nhật IV: Tôi đã tìm thấy một cách mới bao gồm dạng sóng được tạo canvas vào Trình phát Tuỳ chỉnh SoundCloud gốc sc-player.js.

Trước hết tôi thấy một dòng mã chịu trách nhiệm về cấu trúc HTML của các cầu thủ và bổ sung id="waveform"-sc-waveform container on line 529:

.append('<div class="sc-time-span"><div class="sc-waveform-container" id="waveform"> 
     </div><div class="sc-buffer"></div><div class="sc-played"></div></div>') 

Sau đó, tôi được cập nhật dòng 676, thay thế img với canvas

$available = $scrubber.find('.sc-waveform-container canvas'), 

Tiếp theo, tôi tìm một đoạn mã chịu trách nhiệm nhúng hình ảnh ban đầu của dạng sóng trên dòng 340 và nhận xét nó ra:

// $('.sc-waveform-container', $player).html('<img src="' + track.waveform_url +'" />'); 

Và sau đó tôi gửi mã dưới đây ở dưới cùng của trang web của tôi:

<script> 
    SC.get("/tracks/80348246", function(track){ 
     var waveform = new Waveform({ 
      container: document.getElementById("waveform"), 
      height: 40, 
      innerColor: '#ffffff' 
     }); 
     waveform.dataFromSoundCloudTrack(track); 
    }); 
    //----------- end of insterted waveform.js code ---------------------- 
</script> 

Kết quả là rất hứa hẹn, Bây giờ tôi có dạng sóng hoàn toàn tùy biến và chà sàn đang làm việc là tốt. Tuy nhiên vẫn có những thứ tôi muốn sửa.

1. Trong Chrome, khi tôi nhấn phát và tạm dừng, sau đó nhấp vào dạng sóng, bản nhạc bắt đầu phát, nhưng nút phát không thay đổi trạng thái của bản nhạc. Sau đó, cần phải nhấp đúp vào nó để ngừng theo dõi.

2. Thanh bộ đệm và tiến trình vẫn chỉ là sc-player div trong nền. Làm thế nào tôi có thể liên kết sc-player.js và waveform.js với nhau để tiến trình được tạo trên canvas dạng sóng (ví dụ: http://waveformjs.org/)?

Bất kỳ ý tưởng nào để khắc phục chúng?

Dưới đây là các cầu thủ trên trang web trực tiếp: http://www.code.spik3s.com/rnr/

Answer 1

theo yêu cầu chơi

myVar=setInterval(Timed,100); 

function Timed() { 
    total_duration = duration of the track playing; 
    current_duration = the current position of the track. 
    width = canvas width; 
    pointer = the id of the pointer being used to show the progress. 

    position = (canvas_width/total_duration) * current_duration; 

    pointer.style.left = position; 
} 

bạn sẽ phải thiết lập các thông tin, nhưng một cái gì đó như thế này sẽ làm