Waveform.jsとスクラバー機能を備えたSoundcloudカスタムプレーヤー

Question

waveform.jsを使用して私のウェブサイトのカスタムサウンドクラウドプレーヤーで波形を生成しています。それは素晴らしい作品ですが、スクラバーの機能が欠けています。それをどのように追加できますか？

私はJSウィザードではなく、自分のやり方を覚えていますので、何か助けや提案に感謝します！

更新IV：元のSoundCloudカスタムプレーヤーsc-player.jsにキャンバス生成波形を追加する新しい方法が見つかりました。

私はプレイヤーのHTML構造を担当するコードの行を見つけ、ライン529上のsc-waveform containerにid="waveform"を追加しましたまず第一に：

.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

で imgを交換し、ライン676を更新

$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の場合

1. 私は、波形をクリックし、再生し、一時停止を押すと、トラックが再生を開始しますが、再生ボタンは、その状態を変更しません。その後、ダブルクリックしてトラックを停止する必要があります。

2. バッファとプログレスバーは、バックグラウンドではまだsc-playerのdivです。 sc-player.jsとwaveform.jsをどのようにリンクすれば、波形キャンバスで進捗が生成されるのですか（例：http://waveformjs.org/）。

これらの問題を解決する方法はありますか。ここで

は、ライブウェブサイト上の選手だ： 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; 
} 

にあなたが情報を設定する必要がありますが、このような何かが