Waveform.js ve scrubber işlevselliğine sahip Soundcloud Özel Oynatıcı

Question

Web sitem için dalga formları oluşturmak üzere özel bir Soundcloud oynatıcı üzerinde çalışıyorum waveform.js. Harika çalışıyor ama yıkayıcı işlevselliğinden yoksundur. Bunu nasıl ekleyebilirim?

JS sihirbazı olmadığımı, hala yollarımı öğrenmeye çalışıyorum, bu yüzden herhangi bir yardım ya da öneri için çok minnettar olacağım!

Güncelleme IV

: Ben orijinal SoundCloud'a Custom Player sc-player.js içine tuval oluşturulan dalga biçimleri de dahil olmak üzere yeni bir yolunu buldu. Her şeyden

Önce oyuncunun HTML yapısına sorumlu bir kod satırı bulup hattı 529 üzerinde sc-waveform container için id="waveform" eklendi:

Sonra hattı 676 updated

.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>') 

, canvas

ile img değiştirilmesi

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

Sonraki, dalga formunun orijinal görüntüsünü 340 satırına gömmekle sorumlu bir kod parçası buldum ve yorum yaptı:

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

Sonra benim sayfanın alt kısmında aşağıdaki kodu yayınladı:

<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> 

Sonuçlar Şimdi tamamen özelleştirilebilir dalga biçimine ve yıkayıcı olarak iyi çalışıyor, çok umut verici. Yine de düzeltmek istediğim şeyler var. Ben oyun ve duraklama bastığınızda

Chrome'da

1. , ardından dalga biçimini tıklayın, parça çalmaya başlar, ancak oynat düğmesi onun durumunu değiştirmez. Sonra parçayı durdurmak için çift tıklamanız gerekir.

2. Arabellek ve ilerleme çubuğu, arka planda hala yalnızca sc-player divs'dir. sc-player.js ve waveform.js'u nasıl birbirine bağlayabilirim, böylece ilerleme dalga biçimi tuvalinde oluşturulur (örneğin, http://waveformjs.org/'da olduğu gibi)?

Bunları nasıl düzeltebilirim? İşte

canlı web sitesinde oyuncusu: oyun çağrı üzerine http://www.code.spik3s.com/rnr/

Answer 1

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

Eğer bilgi ayarlamak gerekir, ancak böyle bir şey