Pre-rendered Waveform

[mikeyshean]

Hi Katsbaugh,

I know this topic has been pretty exhausted as I've been scouring the many previously opened issues on it, but I still can't seem to get a working solution. I'm trying to render the waveform prior to/while the audio file is being loaded from my S3 bucket.

I've been looking into using the backend 'MediaElement' option and then passing in an array of floating points to render the waveform, but I think my understanding of what exactly the load() function is expecting for the peaks argument may be a bit off.

I've seen you link others here (http://www.wavesurfer-js.org/example/audio-element/), but that page no longer seems to be available. Any advice would be appreciated.

I'm trying to apply this to a clone of SoundCloud that I've been building as my very first web app project after completing one of those immersive development programs. So, working with audio files isn't exactly my strength atm. As you can see, I currently have a loading progress bar as the .mp3s are downloaded which isn't terrible. But, I'd rather not have the user sitting there waiting for the songs to load.

Anyways, thanks for this amazing library. It's been really easy to use up until this minor hiccup and it really makes my project stand out. I really hope there's a simple solution to this :)

[arian1123]

I've been able to do exactly what you are trying to do, if I understand you correctly. What I do is I save the array of peaks to a txt file when the waveform is decoded and then I save that txt on my server. Then when loading that audio file again I pass the file path to that files txt file as the cache parameter in the load() function. Im also getting all of this to work together by loading an instance of the wavesurfer class through an AJAX request. This works pretty well for me. Hope that helps.

[mikeyshean]

@arian1123 yes! That's exactly what I would like to do. Are you are using wavesurfer.backend.getPeaks(length) with the "finish" event to access the peaks? I'm currently running Rails/Backbone and using Paperclip to store files on S3. This is very specific to me, but I assume I can just save the peaks as a .txt paperclip attachment and pass that file to the load() function when I initialize a wavesurfer player? Or.. do you know of a simpler alternative? Thanks for this!

[arian1123]

@mikeyshean Im using AJAX to do most of this. So this is basically how Im processing it, its probably not the prettiest solution but it works reasonably enough. I'm using PHP as my server-side language so obviously you may need to adjust accordingly with Rails:
After decoding I use .backend.getPeaks to get the data of the waveform and I send to PHP via AJAX and write and save the file there. This is pretty simple.
To access it I'm using a GET request again to get all the data for a certain track I'm trying to load. Since you mentioned SoundCloud I assume they do something similar since you can see a GET request for every track it loads. With that AJAX call Im just accessing all the data I need for that file to play properly, so that means URL, waveform cache etc. and Im pushing it all that data onto an object containing all of my data for that track. Then when I use the load function, it just looks something like this: wavesurfer.load(track.url, track.cache);
Hope that makes sense.

[mikeyshean]

@arian1123 ok great.. I'm taking a crack at it as we speak! Sounds like it should be doable with Backbone sending the peaks over to my rails app. I'll let you know how it goes. :)

[arian1123]

Cool. Let me know if you run into any issues maybe I can help!

[mikeyshean]

@arian1123 alright! One day later..... I think I'm finally at the home stretch..

I'm up to passing the decoded peaks into the load() function as the second argument and if it matters, the player initialized with backend: "MediaElement".

Bad news: It renders what appears to be a single peak.. any idea what this means?

[mikeyshean]

After playing around with it, it looks like it does not cooperate with any defined barWidth.

[arian1123]

I had the same issue. When using barWidth for me I just this weird looking waveform that had like 3 bars that where maybe 20px wide each with a ton of empty space between. Not sure if that maybe another bug but thats the issue I had when testing it out so I just leave barWidth set to false.

[chinshr]

What helped in my case was to zip merge the two arrays of audio channel peaks, with the right channel to be inverted.

      ...
      this.wavesurfer.load(
        url,
        _.flatten(_.zip(data.left, _.map(data.right, function(n) { return -n; } )))
      );