Soundcloud Custom Player with Waveform.js and scrubber functionality

Question

I'm working on a custom Soundcloud player for my website using waveform.js to generate waveforms. It works great but it lacks the scrubber functionality. How can I add that?

I'm not a JS wizard, still learning my ways around so I'll be very thankful for any help or suggestions!

Update IV: I found a new way of including canvas generated waveforms into original SoundCloud Custom Player sc-player.js.

First of all I found a line of code responsible for HTML structure of the player and added id="waveform" to 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>')

Then I updated the line 676, replacing img with canvas

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

Next, I located a piece of code responsible for embedding the original image of waveform on line 340 and commented it out:

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

And then I posted the code below at the bottom of my page:

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

Results are very promising, Now I have fully customizable waveform and scrubber is working as well. However there are still things I'd like to fix.

1. In Chrome, when I press play and pause, then click the waveform, the track starts playing, but the play button doesn't change its state. Then need to double click it to stop the track.

2. The buffer and progress bar are still just the sc-player divs in the background. How could I link sc-player.js and waveform.js together so the progress is generated on the waveform canvas (as in example on http://waveformjs.org/)?

Any ideas how to fix those?

Here's the player on the live website: http://www.code.spik3s.com/rnr/

Brookhouse

please show what you already tried and what problems you had. – Electroanalysis

Thanks for replying, I updated the post with current progress. – Brookhouse

I'm trying to find out how to sync the waveform.js with the scrubbing / progress bar of the soundcloud player. I'll update if I make any progress ( which I need to so...... ) – Unexampled

Answer 1

on play call

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

you'll have to set the information in, but something like this will do

Tillage