search

bbc / peaks.js

JavaScript UI component for interacting with audio waveforms
https://waveform.prototyping.bbc.co.uk
GNU Lesser General Public License v3.0
3.2k stars 279 forks source link

Live recording #376

Open yalda-student opened 3 years ago

yalda-student commented 3 years ago

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?

chrisn commented 3 years ago

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.

yalda-student commented 3 years ago

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

chrisn commented 3 years ago

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.

yalda-student commented 3 years ago

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 :)

chrisn commented 3 years ago

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!

yalda-student commented 3 years ago

thank you very much ;-)

commanderz commented 1 year ago

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/