Custom Soundcloud Player with Waveform.js Features and a Scrubber

Question

I am working on a custom Soundcloud player for my website using waveform.js to generate waveforms. It works great, but it lacks the functionality of a scrubber. How can i add this?

I am not a JS master, I am still studying my ways, so I will be very grateful for any help or suggestions!

Update IV: I found a new way to incorporate canvas generated images into the original SoundCloud sc-player.js user player.

First of all, I found the line of code responsible for the structure of the HTML player and added id="waveform" to the 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 line 676, replacing img with canvas

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

Then I found the code fragment responsible for inserting the original waveform image into line 340 and commented on this:

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

And then I put 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> 

The results are very promising. Now I have a fully customizable waveform and scrubber. However, there are still things that I would like to fix.

• In Chrome, when I click the Play and Pause buttons, then click the Waveform button, the track will start playing, but the play button will not change its state. Then double-click it to stop the track.

• The buffer and progress bar are still only sc-player tags in the background. How could I link sc-player.js and waveform.js together so that progress is created on the waveform canvas (as in the example at http://waveformjs.org/ )?

Any ideas how to fix them?

Here is the player on the website: http://www.code.spik3s.com/rnr/

Answer 1

when playing a 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 will need to enter information, but something like this will be