soundcloud / soundcloud-custom-player

The SoundCloud custom javascript based player
http://soundcloud.com
704 stars 231 forks source link

How can I use this with Waveform.js? #77

Open Twansparant opened 9 years ago

Twansparant commented 9 years ago

Hi there,

I would like to have more control over the waveform styling so I added the Waveform library: http://waveformjs.org/#options

From the examples it seems this only works if you call an SC track with the SoundCloud JS SDK library:

SC.get("/tracks/293", function(track){
  var waveform = new Waveform({
    container: document.getElementById("example2"),
    innerColor: "#333"
  });
  waveform.dataFromSoundCloudTrack(track);
  var streamOptions = waveform.optionsForSyncedStream();
  SC.stream(track.uri, streamOptions, function(stream){
    window.exampleStream = stream;
  });
});

But I was wundering what I should pass as track variable in the waveform.dataFromSoundCloudTrack(track) function so I can use onPlayerInit.scPlayer instead to create the waveform? Something like this:

$('.sc-player').bind('onPlayerInit.scPlayer', function(track){
  $(this).find('.sc-scrubber .sc-time-span .sc-waveform-container').attr('id','sc-waveform');
  var waveform = new Waveform({
    container: document.getElementById('sc-waveform'),
    innerColor: "#333"
  });
  waveform.dataFromSoundCloudTrack(track);
});

Thanks!

jacobraccuia commented 7 years ago

Really old post, but if you are still trying to do this I can help you.