search

staskobzar / vue-audio-visual

VueJS audio visualization components
MIT License
693 stars 111 forks source link

TODO: Allow very long files load for av-waveform #15

Open staskobzar opened 5 years ago

staskobzar commented 5 years ago

Element crashes when trying to process too long files (2h +)

Helmi commented 3 years ago

Is there anyway near on the todo? I am looking to use it for podcasts where most files have 2h+

staskobzar commented 3 years ago

Hello, Unfortunately, I do not know if this plugin can do that with this big files. This is front-end plugin so it has to download the whole file, process it and store in memory the whole array of data to build canvas visualization. Browser will probably start consuming a lot of memory and crash or freeze. The best solution for this big files would be probably to process files in back-end, generate image of waveform and store it on disk or in DB for future use. Then stream the files and upload the image to user browser. This way the image is "cached" and not need to be re-generated each time user reload the page.

If you have better ideas, please, let me know. We can discuss it here.

Thanks

account00001 commented 1 year ago

Instead of reading the entire buffer at once, it may be beneficial to only process the file in chunks where range processing is supported. This would allow the user to specify a buffer size, say 10mb. Once the player reaches the end (or near the end) of the current chunk, it would queue up the next chunk and the waveform visualization would reset to zero and continue with the next buffer chunk without audio interruption. Unfortunately, this means scrubbing on the waveform visualization is only supported within that chunk unless something clever is done such as loading/unloading chunks based on the scrub position to allow for a seamless scrub which scrolls the waveform visualization.

I know this is an old thread but this may offer a front-end approach to handle large files.