Combining multiple waveforms

[edsilv]

Hi,

I'm currently working on the British Library's Save our Sounds project. We have a use case where we need to combine multiple separate waveforms into a single zoomable waveform on the client-side. Do you know of any examples of the best way to do this? Here's my current attempt:

https://github.com/edsilv/peaksjs-test/blob/gh-pages/multi-waveform.html

However this is crashing Chrome when certain durations are selected.

I'm pretty sure I'm approaching this naively, and need to be using something like resample?

Any pointers greatly appreciated....

[chrisn]

Is your goal to concatenate several separate waveforms into one? Do you need to be able to synchronise the visuals with the audio playback (e.g, scroll the waveform or update a playback position marker)? Save our Sounds is a great project, by the way!

[edsilv]

Hi Chris,

Thank you for the fast reply, and for this awesome library.

Yes, we've got multiple .dat files - each representing a distinct recording per "manifest", e.g. a tape that is one logical item, but has a distinct recording for each side.

We need to be able to show a combined waveform visualisation for both sides of a tape, that can also be zoomed to a given offset.

Right now (although it may be a requirement in future) there's no requirement to update a playback position marker or scroll the waveform.

Because of the way things are set up on the server side, it's necessary to concatenate the waveforms on the client. I tried combining the byte arrays into a single one in javascript, but couldn't get that to work. So then attempted to split the canvas into separate regions and draw each part individually.

The designs show that I need to draw it in such a way that it's segmented into separate bars rather than a continuous line. I think I've pretty much figured that out.

I'm running into this chrome crashing bug, and feel like I may be barking up the wrong tree with this approach...

[chrisn]

I think the way I'd approach this is:

• Create a WaveformData object for each of the waveforms, i.e., resolve(WaveformData.create(progressEvent.target.response)); in your get(url) function
• Resample each of those WaveformData objects to your desired zoom level (samples per pixel)
• Create an abstraction that allows you to treat this collection of waveforms as a single logical array of data points
• Change the rendering code to use this new abstraction

[edsilv]

Sounds good, will give it a try. Many thanks!

[edsilv]

I altered your approach slightly to allow drawing ranges within the composite waveform:

https://edsilv.github.io/peaksjs-test/multi-waveform.html

This makes for quite a boring waveform though when zoomed out :-) Is there a way to improve how the peaks are getting averaged out so that they're more "peaky"?

[edsilv]

https://edsilv.github.io/peaksjs-test/multi-waveform.html

I made the sample size in getMaxAndMin constant (canvas.width / barSpacing)

Seems to have done the trick!

[chrisn]

Looks good! Do you mind if I use this in Peaks.js? I'd like to offer a way to allow users to customise the waveform rendering, and this would be a nice example.

[edsilv]

Sure, go ahead! Thank you for your help :-)

…

On Tue, 24 Jul 2018, 20:38 Chris Needham, ***@***.***> wrote: Looks good! Do you mind if I use this in Peaks.js? I'd like to offer a way to allow users to customise the waveform rendering, and this would be a nice example. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#48 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABRceWdMDVqBwBDpoeJLMxkcQg1uPFE6ks5uJ3elgaJpZM4VUYCf> .

[loretoparisi]

@edsilv you curious, assumed that you combine two audio waveforms of the same tape, what is the advantage to have them combined together instead of having them separated but in the same visualization, so that the waveforms can be compared? Maybe I'm misunderstood your need, I'm asking 'cause I'm using peaks.js for the same thing.
Thank you!

[edsilv]

@loretoparisi Hey, it was just to make it easier for the back-end guys who only had .dat files for individual sides of tape as opposed to the entire recording. Their viewer (universalviewer.io) needs to show individual sides of tape with their waveform, and both sides stiched together with a stiched-together waveform.

[davidturissini]

FWIW this is also the approach i used to make a streaming-compatible waveform. Just make a container that holds other waveforms