Wavesurfer.js: Generating waveform during recording and then saving it

[d0ragon]

Hi, I've seen #272 but I don't know the current status of that, also I have one more question, so here goes.

1. Is it possible with the microphone plugin to show the full waveform of the recording, not the current process? So the waveform would get longer as the recording continues.
2. Is it possible to save the recording afterwards? I mean can the audio blob be fetched somehow?

If there is no straightforward way to achieve these things, some kind of a hint or direction would be much appreciated.

@thijstriemstra, tagging you as the creator of the awesome microphone plugin.

Thanks.

[thijstriemstra]

1. I've tried to implement this but couldn't figure out a way to show the full waveform due to canvas performance issues. I did implement a sort of scrolling waveform that flows to the left during recording/playback but that code is still in a branch that I haven't updated in a while but hopefully will get to that again soon.
2. Yes that's possible, take a look at https://github.com/collab-project/videojs-record and it's internals

[d0ragon]

I wonder how these guys manage to do it: http://waveformjs.org/#fly

I'm trying to dig through https://github.com/soundcloud/waveformjs

[thijstriemstra]

Personally I would like to create a waveform that shrinks as it becomes longer so it's basically always the same size (what you see in software like Ableton, Logic etc). That 'fly example' is not the same effect unfortunately. I created something that would grab the first waveform, render it at 100%, the next waveform would be attached at 50% of the original waveform and that original waveform is scaled to 50%, the third waveform goes at 66% etc. Unfortunately this was very slow with Canvas but it was pretty much working.

[d0ragon]

I get that, but all I need is about 15-20 seconds of recording, so I don't think shrinking would be needed in my case.

[Tedamo]

@thijstriemstra and @d0ragon, have you made any progress on this?

Thanks!

[JonathanThorpe]

I've been trying to work with this as well.

Looking at the plugin, it seems that it might not actually store the data at all? The play command on this looks like it might actually be a trigger to start recording rather than play back - I can't seem to get the resulting data out of it.

[davidtorroija]

same for me the recorder by mic is not working for me

[thijstriemstra]

wavesurfer.js currently does not have a ' recorder by mic' @davidtorroija so not sure what you mean.

[davidtorroija]

wavesurfer.js currently does not have a ' recorder by mic' @davidtorroija so not sure what you mean.

I'm using the "microphone" plugin, but I don't know how to get the recorded audio and play, save, get the buffer etc

[thijstriemstra]

@davidtorroija use videojs-record for example, e.g. https://collab-project.github.io/videojs-record/examples/audio-only.html or help implement #1030

[davidtorroija]

@thijstriemstra ok I will use that library I think, thanks

[alisherakb]

Guys, what do you think of the following implementation:
https://codepen.io/Sambego/pen/VmBJJN

[davidtorroija]

I Created a POC of this functionality working, I'm rendering in canvas the recording peaks of sound in real time https://codepen.io/davidtorroija/pen/ZZzLpb?editors=0010

It was hard and I get help from an expert in web audio here: https://stackoverflow.com/questions/55407563/web-audio-api-and-javascript-get-the-correct-picks-from-microphone

[alisherakb]

@davidtorroija Thank you for sharing with this treasure!
I also saw that you mentioned the sample (https://online-voice-recorder.com/es/) and I'm wondering how I can achieve the same selection (start and end) and be able to trim and record over it.

[thijstriemstra]

@davidtorroija that looks really coo! Could you rework this into a pull request so it can be used in wavesurfer.js by others as well?

[davidtorroija]

@davidtorroija Thank you for sharing with this treasure!
I also saw that you mentioned the sample (https://online-voice-recorder.com/es/) and I'm wondering how I can achieve the same selection (start and end) and be able to trim and record over it.

Thanks for your comments!, and yes @thijstriemstra, @alisherakb I think that is harder! haha, I do not want to promise anything, but if I find the time I will keep investigate this integration with wave surfer

[nilesh121196]

Check it out to record and replay audio from microphone plugin:
https://github.com/katspaugh/wavesurfer.js/issues/1515#issuecomment-590705075