Picobel stuck in loading state before pressing Play on mobile devices
jchausse opened this issue · 3 comments
This is demonstrable from the Codepen theme demos. When a page using Picobel first loads on an iPhone (possibly also on Android?) the Picobel UI stays in the Loading state (and displays "File 1" as the title, depending on the theme) until the user taps the Play button. Everything works great after that.
Hi, Jeff. This was a tricky little bug to get to the bottom of, but this is what I think is happening:
The "loading" state is removed when the canplaythrough event is triggered by the audio file. canplaythrough only gets triggered when the browser thinks it can play the entire file. I think that when you've been tapping the Play button on mobile, only some of the file can be played. This means the play events get triggered properly (which overrides the loading state) and the audio is played as-normal.
If you want the loading state to be removed when any of the file can be played, try hooking into the canplay event rather than the canplaythrough event. I won't have time to implement and test this myself for a while, but if you want to try it yourself this is where you'll need to make changes:
On line 269 in the uncompressed source (/picobel.js) you need to change myAudio[i].addEventListener( 'canplaythrough', _canplaythrough, false ); into myAudio[i].addEventListener( 'canplay', _canplaythrough, false );.
If you're working with the minified version, a find/replace on the whole file should work (changing canplaythrough to canplay).
You can see more detail on the MDN site
Hi Tom - thanks for taking a look. I also did a bit of hunting around, and came to the same conclusion - that iOS wasn't triggering the "canplaythrough" event properly. My first attempt at fixing the problem was also to move your logic into the "canplay" event. But that didn't seem to work, either. (It's entirely possible I did something wrong, though). For my own needs, I ended up moving the logic right into the initAudio function, which was probably a bad idea :) If and when you have some time to work on this, I eagerly await a smarter fix.
V3 (just released) handles loading state slightly differently, so (according to my latest testing) this is now fully fixed (only seven years later 😆 ).