Update waveform

[Skaaala]

Hello everybody,

I created a sample app, with features like cut part, change volume, fade-in, fade-out etc. And when i want to update waveform, i have to destroy peaks instance and create the new one with fresh audio src which is sent to peaks.js through init function. I found that function call getAudioDecoder(options, callback) in audiodecoder.js is really expensive and slow for bigger audio files. So my question is: Is there any way to recalculate or resample only part of data which is defined by points in peaks.js? The main goal is speed up the application, because process of recreation whole peaks instance is really slow and i need only small change in final waveform.

Thanks so much for advices or ways to do it

[chrisn]

I just released version 0.11.0 which adds a setSource function that allows you to update the waveform without destroying the Peaks instance.

There's currently no support for recalculating only part of the data, though.

[Skaaala]

Thank you so much for answer @chrisn.

[chrisn]

I'm interested to see if we can solve the partial recalculating / resampling question. Are you using the Web Audio API to do the edits and fades, etc?

[Skaaala]

Yes, i'm using AudioBuffer which holds whole record and operations like fade in, fade out, split, beep, delete or changing volume are calculated on this Array and after that visualized via peaks.js.

[chrisn]

Peaks.js uses the waveform-data.js module to generate and provide access to the waveform data. For your use cases, we'd need to update that module to allow partial updates. Are you interested in helping me figure out what the API should look like, and how this would integrate into Peaks.js?

[Skaaala]

i am currently trying to hack audiodecoder.js file with remember previous DataView Object and resample only part which is needed for update, because I identify that this part is really expensive. But yes, i can help you figure it out

[dominicbartl]

Hey @chrisn, is there a way to update the waveform with an AudioBuffer using the setSource() method. I briefly looked over the source code and it seems to me that it's only possible to initialize the Peak instance with an AudioBuffer but it's not possible to update it, since it requires the mediaUrl property.

We're building an internal platform to record and edit audio snippets. For that we're using AudioBuffer since it's really easy work with. If you give me some guidance I could contribute to this project as well since before stumbling upon it we were close to writing our own waveform renderer. Though I would prefer not to reinvent the wheel and use the time to extend the functionality of peaks.js

On a side note, partial waveform rendering would be an awesome feature for recording as well. Though we could do this on our own for now with the waveform-data.js package.

[chrisn]

Right now, Peaks.js is tied to using a media element, so setSource() is there to change the mediaElement.src property and update the waveform view. I assume with AudioBuffer, you're not using a media element, just the Web Audio API? Supporting this is possible but would mean making quite a few code changes. I'd want to figure out what the public API looks like first.