具有Waveform.js和擦除功能的Soundcloud自定義播放器

我正在爲我的網站使用waveform.js生成波形的自定義Soundcloud播放器。它工作的很好，但它缺少洗滌器功能。我如何添加？具有Waveform.js和擦除功能的Soundcloud自定義播放器

我不是一個JS嚮導，仍然在學習我的方法，所以我會非常感謝任何幫助或建議！

更新IV：我發現了一種將畫布生成的波形包含到原始SoundCloud自定義播放器sc-player.js中的新方法。

首先，我發現了一個行的負責播放器的HTML結構代碼，增加了id="waveform"到sc-waveform container上線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>')

然後我更新了線676，與canvas

更換 img

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

接下來，我找到一段代碼，負責在340行上嵌入波形的原始圖像並將其註釋掉：

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

然後我貼下面的代碼在我的網頁的底部：

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

的結果是非常有前途的，現在我已經完全可定製的波形和洗滌器的工作，以及。不過，我仍然想要解決一些問題。

在Chrome中，當我按下播放和暫停，然後單擊波形，軌道開始播放，但播放按鈕不會改變其狀態。然後需要雙擊它來停止軌道。
緩衝區和進度條仍然只是後臺的sc-player div。我如何將sc-player.js和waveform.js鏈接在一起，以便在波形畫布上生成進度（如http://waveformjs.org/中的示例）？

任何想法如何解決這些問題？

以下是直播網站上的播放器：上打打電話 http://www.code.spik3s.com/rnr/

來源

2013-05-20 spik3s

請出示什麼你已經試過了，你有什麼問題。 – pascalhein

感謝您的回覆，我用當前進度更新了帖子。 – spik3s

我試圖找出如何同步soundcloud播放器的scrubbing/progress bar的waveform.js。如果我取得進展，我會更新（我需要這麼做......） –

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

你必須設置的信息，但這樣的事情會做

來源

2014-12-08 09:16:27 krisph

具有Waveform.js和擦除功能的Soundcloud自定義播放器

回答

相關問題