search

SacredData / jekyll-hypermusic

A HyperMusic jekyll template!
https://multipli.city
MIT License
2 stars 1 forks source link

Minimize loading time impacts caused by large audio files #2

Closed agrathwohl closed 3 years ago

agrathwohl commented 4 years ago

When the MP3 located at post.stream_url is 20+ minutes in duration, load times become unacceptable.

We need to get more information on this phenomenon:

  1. Is this issue caused by how long it takes to load the file itself? Or (more likely) is it just the result of having to draw a longer waveform? My money is on wavesurfer being the problem - not the MP3 file.
  2. Would synchronously pre-loading the peaks array for the audio file fix the problem?
  3. If not, would streaming the audio file in chunks to an AudioBuffer do the trick instead?
  4. If so, does the waveform still take too long to render before playback begins?
agrathwohl commented 3 years ago

Experiments conducted today yielded some important insights.

We are able to load the waveform and begin audio playback almost immediately, when:

  1. Loading the peaks JSON from the local assets/peaks dir via fetch().
  2. Using the backend: MediaElementWebAudio instantiation option for WaveSurfer.

Currently, this also breaks background visualizations as they are currently implemented. The move is probably to:

  1. Kill visualizations. Make sure post and playlist layouts work without any visualizer code.
  2. For post layouts, implement improved WaveSurfer code in a new include, _includes/wavesurfer.html. This code should load peaks data from the local assets dir and use backend: MediaElementWebAudio for now. (Later, make it dynamically and intelligently build out the WaveSurfer config based on context from the post/playlist metadata.)
  3. See how much we miss the pretty colors and re-implement them if we feel it is necessary.
agrathwohl commented 3 years ago

Fixed in a big way in commit d85fe181170853236aaa3687987b8a10078c577f