Soundcloud Custom Player con Waveform.js e funzionalità di scrubber

Question

Sto lavorando a un player Soundcloud personalizzato per il mio sito Web utilizzando waveform.js per generare forme d'onda. Funziona alla grande ma non ha la funzionalità dello scrubber. Come posso aggiungerlo?

Non sono un mago JS, sto ancora imparando i miei modi, quindi sarò molto grato per qualsiasi aiuto o suggerimento!

Aggiornamento IV: Ho trovato un nuovo modo di includere tela generato forme d'onda in originale SoundCloud player personalizzato sc-player.js.

Prima di tutto ho trovato una riga di codice responsabile per la struttura HTML del giocatore e ha aggiunto 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>') 

Poi ho aggiornato la linea 676, in sostituzione di img con canvas

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

Successivamente, ho individuato un pezzo di codice responsabile dell'inclusione dell'immagine originale della forma d'onda sulla riga 340 e l'ho commentato:

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

E poi ho postato il codice qui sotto in fondo alla mia pagina:

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

risultati sono molto promettenti, Ora ho forma d'onda completamente personalizzabile e scrubber sta lavorando pure. Tuttavia ci sono ancora cose che mi piacerebbe aggiustare.

1. In Chrome, quando premo play e pausa, quindi fare clic sulla forma d'onda, la pista inizia a suonare, ma il tasto di riproduzione non cambia il suo stato. Quindi è necessario fare doppio clic per interrompere la traccia.

2. Il buffer e la barra di avanzamento sono ancora solo i div sc-player in background. Come potrei collegare sc-player.js e waveform.js insieme in modo che l'avanzamento sia generato sulla tela della forma d'onda (come nell'esempio su http://waveformjs.org/)?

Qualche idea su come sistemarli?

Ecco il giocatore sul sito live: http://www.code.spik3s.com/rnr/

Answer 1

su chiamata gioco

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

dovrete impostare le informazioni, ma qualcosa di simile farà