Awesome library - need some help + suggestions

[Alagaesia93]

Hi there!

I had absolutely no idea until today about gapless problem / solutions and found this little gem 💎. Amazing work!

I have a small issue that I can't seem to fix ReferenceError: gapless5Players is not defined at HTMLInputElement.onmousedown This is my code (it's liquid)

<div id="gapless5-player-id" />
<script type="text/javascript">
  window.onload = function() {
    const player = new Gapless5({ guiId: 'gapless5-player-id' });

    {% for file in folder.files %}
      {% if file.content_type == 'audio/mpeg' %}
        player.addTrack('{{ file.viewing_url }}');
      {% endif %}
    {% endfor %}
  }
</script>

When clicking on any point in the bar to go to minute X, this is the error shown in console. I'm probably missing something stupid, thanks in advance for the help - tried to google and chatgpt, but no results. Is it related to the onload?

Second question. Are you aware of any custom pre-built CSS players to plug-and-play?

Third question. Is this library able to read ID3 tags? I had no idea they existed until today, apologies in advance if this a stupid question!

Not sure how, but happy to contribute! Thank you! 👏

[Alagaesia93]

Fourth question. Inside my liquid, file.viewing_url is a presigned CDN url valid for one hour. If each track is one minute long, is it safe to assume that 61st will be loaded ok, and 62nd will fail? 61st will be preloaded within the 60mins limit, 62nd not.

[regosen]

1. That sounds like your mousedown is triggering in a different scope from your gapless5 player, which is odd. Can you try this branch instead? https://github.com/regosen/Gapless-5/tree/rego/check-for-global-variable
2. The only "plug-n-play" GUI I'm aware of is the built-in one. I do use my own UI for some of my own pages, you can see how I do it here: https://regosen.com/regosen-player.js
3. Gapless5 does not process ID3 tags, that would require importing additional libraries. We just send the audio data directly to WebAudio / HTML5Audio objects.
4. Once you preload the data, it's in local memory and doesn't need to be accessed via URL anymore. I think you should be able to confirm this via the Network tab in your browser dev tools.

[Alagaesia93]

Thank you so much for coming back to me so quickly!

1. Still error with that branch. 3 errors on console: onmousedown, oninput and onmouseup. Not sure how I can help you debug
2. I can't load your website, sorry! I will try the CSS editing. It would be awesome to have some fancy good looking GUI, but I know it takes a while
3. ID3 tags, thanks!
4. I went to network tab and checked, you are downloading in local memory all the files at the beginning? Can audio start even if last download didn't work? I'm just wondering if I have 1 GB of files, split in 100 files, how will it work? Totally fine the way it is, just anticipating questions I will get!

Thank you so much!

[regosen]

1. It sounds like those events are being triggered off a different script from the one that created the Gapless5 object, I just pushed a commit to my branch that puts gapless5Players into the window object, can you try pulling and giving it another shot? At the very least the error message will be different this time.

2. By default it downloads all data from memory, and if a download fails it will fail to play that track but should still play other tracks. You can reduce the memory footprint by setting loadLimit in the options when you initialize the Gapless5 object- that sets how many tracks will be loaded in memory at one time (see README for details)

[regosen]

Hi, I've merged my branch to main and published a new version (1.5.4) closing this issue