Wavesurfer.js: Can Wavesurfer be used to play a series of audio files in a row?

[andrade1379]

Was hoping to use this awesome tool to play audio files one right after the other while each audio files has their own audio visualization hopefully a custom visualization.

Wish list:

• Custom Renderer (I have SVGs that I'd like to use)
• Audio playlist
• Each audio file gets it's own custom renderer

Is something like this doable with this tool?

[katspaugh]

Custom renderer–I think the easiest would be to superimpose your SVGs over the original waveform and make the latter invisible. Otherwise you can implement your own renderer instead of the Canvas renderer. I can explain in more details if you go this way.

Playlist–take a look at http://wavesurfer-js.org/example/playlist/ (code: https://github.com/katspaugh/wavesurfer.js/tree/master/example/playlist).

[andrade1379]

Okay, would it be possible to have more than one waveform visible on the page on a timeline like layout.

Something like:

So audio file would be loaded on page load along with it's custom visual? does that make sense?

[chrisparton1991]

Hey @andrade1379, I've created a CodePen example of sequential waveform playback.

Basically, it loads three wavesurfer instances attached to different audio files (in this case, three letters of the Dutch alphabet), and plays them sequentially. Only the waveform for the current item is visible.

Not sure if this is on the path of what you're looking for, but hopefully it helps. You could add code to show SVGs in the code where I show the waveform.

[andrade1379]

Awesome @chrisparton1991. I'll take a look. It does sound like something I was trying to work towards.

Check out what I came up with using vanilla js, html5 audio, Snap SVG, and D3.

https://ear.show/

[chrisparton1991]

Your site looks really nice @andrade1379, good job :) It works great for me on desktop and mobile.

I believe wavesurfer once had an SVG renderer, but it was too slow for rendering large waveforms, especially when using a slider to zoom in, causing rapid redraws.

It looks like your solution is working quite well for you, but I'm happy to help with any wavesurfer questions that I can if you choose to go down that path.

[shilpaaneesh]

I need the wavesurfer to be played continuously from the playlist. Is it possible to display a continuous waveform from a set of audio files

[thijstriemstra]

Is it possible to display a continuous waveform from a set of audio files

There's no API for this yet.

[shilpaaneesh]

Can you please post a sample one here. I need the waveform to be updated when taking the next or previous file from the playlist and if I scroll back or forward it should load accordingly