possibility to play waveform multiple times on top of each other

[tabascoeye]

I need multiple instances of wavesurfer which support multiple, overlayed .play() calls. Kind of like the Audio Sprites feature in Howler.js. But since Howler.js does not have waveforms and I fell in love with the regions plugin of wavesurfer, I wanted to ask if there is possibility for a JS noob (me) to implement an option into a wavesurfer instance so that it is possible to hit play() multiple times and the audio keeps on playing overlayed?

I saw that webaudio.js contains a sort of state machine which handles isPlaying()and things like that. Would that be a starting point to get this to work?

[katspaugh]

I think you can simply create several (possibly invisible) instances with the same audio and play them sequentially when pressing the button.

[tabascoeye]

that would be a workaround for now. Ideally I would also want the progress to be shown of each individual play. Take the audio sprite example of howler.js: https://howlerjs.com/#sprite if you click the "beat" multiple times, each time you click, the sound is played and overlayed on top of the already playing ones and a new progressbar starts running alongside the others.

That would be pretty cool.

(notice that the waveform they show in this demo example is just a PNG in the background 👎 )

[swampthang]

tabascoeye, I played around with a loop builder that might have a few nuggets you can use. Personally, I was trying to tie it to a GSAP (animation) timeline but the code should be easy enough to parse through for anything you might be able to use.

It's a single wav file you can drag across to create a loop region, set the number of loops you want and click to reset the loop. The new looped regions are represented at the bottom of the codepen. It has a few flaws and I ended up going in a different direction for now, but might be of interest to you.

Oh, and I built in a little fade that happens at the end of the animation using GSAP's onUpdate callback which you can ignore.

http://codepen.io/swampthang/pen/RKbKzv?editors=1010

[tabascoeye]

@swampthang thanks for the link, but I don't want loops, I want the option to have any wavesurfer instance to overdub itself by doing multiple play events.

[swampthang]

Gotcha. I think that might spur some thoughts on how you can accomplish it. If you look at the code, there is a new instance of wavesurfer created inside each object but the audio file is the same for each instance. Getting and setting params on each individual object should allow you to do anything you want using the regions plugin. Each of those instances (the object named block) also has a reference to a div element so you could position it anywhere you want based on the position in the timeline.

[entonbiba]

@tabascoeye something like this? https://www.entonbiba.com/lab/wavesurfer/930.html

[tabascoeye]

yeah that was precisely what I was looking for 3 years ago ;) Thanks. I abandoned the project I needed that for :/