peaks.js icon indicating copy to clipboard operation
peaks.js copied to clipboard

Published 20 hours ago • verified publisher icon bbc

Live recording

Open yalda-student opened this issue 3 years ago • 7 comments

hello thanks for your nice library :) I have a question about using this library while audio recording. does this library support this feature? I tried this but after 1 minute of recording, I can't scroll horizontally until I stop recording. would you please help me?

yalda-student avatar Mar 09 '21 16:03 yalda-student

I'm sorry, this isn't supported. At present, Peaks.js is currently only designed to show waveforms for pre-recorded audio. I'd be happy to consider adding this feature if any contributor is interested enough to work on it.

chrisn avatar Mar 09 '21 17:03 chrisn

what a pity .. thank you :) can I ask you which part of code calculates time of audio (used in zoomview_container) depend on waveform data? tnx

yalda-student avatar Mar 10 '21 10:03 yalda-student

Sure, look at WaveformZoomView.pixelsToTime() - pixels are the waveform data points, scale is number of audio samples per pixel, and sample rate is audio samples per second.

chrisn avatar Mar 10 '21 11:03 chrisn

Hello again sorry I have a question again, :) what's the reason that it doesn't support? It has a limitation or just the team didn't work on it?

and how did you draw waveform using data array?

thanks a lot :)

yalda-student avatar Mar 13 '21 17:03 yalda-student

Hello again sorry I have a question again, :)

No problem :-)

what's the reason that it doesn't support? It has a limitation or just the team didn't work on it?

There are a few reasons. Peaks.js is designed to work with pre-recorded audio files, and changing it to support real-time recording would require a lot of work to redesign the code. Also, our own use cases so far don't need it, so it hasn't been a priority for us. Finally, I only have a very limited amount of work time to put into Peaks.js, so most of the work I do on it happens in my own personal time.

and how did you draw waveform using data array?

I recommend looking at our waveform-data.js project, which Peaks.js uses internally. This has a demo that shows how to draw the waveform on a canvas.

thanks a lot :)

You're very welcome!

chrisn avatar Mar 13 '21 20:03 chrisn

thank you very much ;-)

yalda-student avatar Mar 14 '21 20:03 yalda-student

Nice example how to create live recorder, created by @AbreezaSaleem : https://codesandbox.io/s/react-voice-recorder-player-example-gtod60?file=/public/index.html React package here: https://www.npmjs.com/package/react-voice-recorder-player. Source code here: https://github.com/AbreezaSaleem/react-voice-recorder-player/

commanderz avatar Jun 24 '23 08:06 commanderz