Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Load big audio files with WebAudio backend and MediaElementAudioSourceNode #1763

Closed
marizuccara opened this issue Oct 4, 2019 · 8 comments · Fixed by #1767
Closed

Load big audio files with WebAudio backend and MediaElementAudioSourceNode #1763

marizuccara opened this issue Oct 4, 2019 · 8 comments · Fixed by #1767
Labels
enhancement

Comments

@marizuccara
Copy link
Contributor

marizuccara commented Oct 4, 2019 •
edited by thijstriemstra
Loading

I tried to load an audio file with a duration of three hours, but the browser crashes because internally the library uses AudioBuffer to decode the audio data and AudioBuffer can not be used with huge files. An only solution that i found is to load the file with MediaElement backend, but i know that this backend handle the audio resource without Api Web Audio, so i will lost all my functionalities.

From the API Web Audio, there is a possibility to load an audio as an HTML tag, but using as a source node the MediaElementAudioSourceNode, instead of AudioBufferSourceNode which decodes internally the audio data causing the crash of the browser in case of big files. Using MediaElementAudioSourceNode, it can can be connected to other nodes of the Audio graph normally, using the Audio Context, so filters and other functionalities can be applied (also it can be connected to the AnalyserNode to draw the waveform).

Is there a possibility to implement this option or is there another way to load big audio files with the possibility to have audio filters and other features?

It is a short example:

            const audioContext = new AudioContext();
            let audio = document.querySelector('audio');
            let mediaStreamSourceNode =  audioContext.createMediaElementSource(audio);

            let gainNode =  audioContext.createGain();
            gainNode.gain.value =1;

            mediaStreamSourceNode.connect(gainNode).connect(audioContext.destination);
@thijstriemstra
Copy link
Contributor

Is there a possibility to implement this option

Sounds like a good idea, can you make a pull request?

@marizuccara
Copy link
Contributor Author

Done! I've commented in my request my changes.

@marizuccara marizuccara mentioned this issue Oct 7, 2019
Merged
@TrevorHinesley
Copy link

Will this also fix sync offset/drift on long files?

@TrevorHinesley
Copy link

Also, does using MediaElementAudioSourceNode load the file in chunks, or does it load the entire file like WebAudio typically does?

@marizuccara
Copy link
Contributor Author

Also, does using MediaElementAudioSourceNode load the file in chunks, or does it load the entire file like WebAudio typically does?

It loads the file from server in the same way as the MediaElement backend does. Since this Source Node wants an HTML5 tag, the audio is loaded like audio tags are loaded, requesting it in ranges from server.
In this way you can load also big audio files, because it internally does not decode the audio. You have to pass also peaks, so the waveform can be drawn without decoding.

@web-linda
Copy link

Hello, I have a question . How are you get the peaks ?

@marizuccara
Copy link
Contributor Author

Hello, I have a question . How are you get the peaks ?

Hi! You can get them with audiowaveform as described in https://wavesurfer-js.org/faq/, or with ffmpeg.

@web-linda
Copy link

Hello, I have a question . How are you get the peaks ?

Hi! You can get them with audiowaveform as described in https://wavesurfer-js.org/faq/, or with ffmpeg.

Hello. How ffmpeg generate peaks? Can you give me some commands ? Thanks very much.

Repository owner locked as resolved and limited conversation to collaborators Nov 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow to use HTML5 audio tag with API Web Audio marizuccara/wavesurfer.js
4 participants
@thijstriemstra @TrevorHinesley @web-linda @marizuccara