Comments (3)
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
from picobel.
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.
from picobel.
V3 (just released) handles loading state slightly differently, so (according to my latest testing) this is now fully fixed (only seven years later 😆 ).
from picobel.
Related Issues (20)
- Mute Button
- Loading/buffering status indicator
- Cleanup for Publishing
- Demo images
- Proper theming functionality
- Library of themes
- Default theme
- CoC
- Contribution Guidelines
- dB VU Meter
- Bare-bones theme
- Switcher for player-demo
- Docs for title/artist
- Playback Rate
- Browser-style themes
- Make available on NPM HOT 1
- Song duration text is cut off for track lengths longer than an hour HOT 1
- Is <source> in <audio> not supported? HOT 1
- CSS file naming & X-Content-Type-Options: nosniff
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from picobel.