On mobile devices (iPad, Android phone), progress bar doesn't update on first song

[txironman]

Issue description

Use an iPad (Safari or Chrome) or Android phone (Samsung browser or Chrome) and navigate to:

https://521dimensions.com/open-source/amplitudejs/docs/examples/

Play the first song loaded in any of the examples. Note that the song will play, but the progress bar will not update. The current time will also not update. Tapping on the progress bar will change the position on the song, but you will not see any indication of the new song position on either the current time nor the progress bar. Once you change songs, everything mentioned previously will work.

This is a particular problem for me because I would like to use the single song player. Because there is only one "song", I am unable to get the current time & progress bar to work properly on the mobile devices I've tested on.

Environment

• What's My Browser Support link: https://www.whatsmybrowser.org/b/C3A20
  https://www.whatsmybrowser.org/b/YQMFU
  https://www.whatsmybrowser.org/b/SJTQE
  https://www.whatsmybrowser.org/b/4KKMB

• Amplitude.js Version: whatever version you use on your examples page.

Steps to reproduce the issue

1. Use one of the device/browsers listed.
2. Navigate to https://521dimensions.com/open-source/amplitudejs/docs/examples/
3. Play the song (for single song player) or first song (for all others)

What is expected?

Current time updates while song plays. Progress bar updates while song plays.

Link to where issue can be reproduced

https://521dimensions.com/open-source/amplitudejs/docs/examples/

Additional details / screenshots

[mrhanna]

I am having the same issue. Additionally, I can reproduce the issue on desktop (using Firefox 71 64bit for Linux) in Responsive Design Mode (RDM) if (and only if) I reload the page using any preset device settings. All examples work as expected on desktop otherwise, even in RDM when not using a preset.

The only difference I observe from OP's description is that I can't count on these features to start working when I play the second song. Sometimes, I have to switch between songs several times before it begins to work as expected, at which point it continues to work as expected indefinitely. I cannot discern a pattern as to why it begins to work sometimes and not other times.

edit: this issue only presents on v5.1.0, so I have downgraded to v5.0.3 for the time being.

A couple of observations that may be helpful -

1. If, when playing the first song, I invoke Amplitude.bindNewElements() in dev console, the current time, progress bar, etc. immediately update and work as expected. However, upon switching songs, the issue persists and the elements remain broken (unless they don't, as described above).
2. Something screwy seems to be going on with events here. I have attempted to add a play callback as shown below.
   In this case, "play" is not logged after reloading and pressing play while in RDM—but just as before, it works as expected in other circumstances.

Amplitude.init({
  /* songs here, etc. */
  callbacks: {
    initialized: function() {
      Amplitude.getAudio().addEventListener('play', function() {
        // should log 'play' when audio begins playing; does not work in responsive design mode!
        console.log('play'); 
      });
    }
  }
});

[jaydrogers]

I am able to replicate this on the main site too: https://521dimensions.com/open-source/amplitudejs

I am escalating this to @danpastori for further review.

[jaydrogers]

Sorry that our FREE software with FREE support offended you. Glad that you found a solution that works for you.

[danpastori]

So I've definitely narrowed this down to the native timeupdate event not being fired on mobile. This is really unique since it's able to be replicated in the browser as well but only in responsive testing mode. I am doing some more research, and will hopefully have a fix soon.

@mrhanna The play() callback has been fixed in the dev branch if you want to give that a try. That had to do with rebinding events after clearing out the audio. I assume this is what we are looking at with the timeupdate as well, but it's tricky to narrow down.

Fix hopefully coming soon 🤞

[kartikcool15]

I have found One Temporary Fix for this .... Load the Player in Paused State... Just after Amplitude.init, call Amplitude.paused(); ... Now player will be in paused state, so whenever you play a song, it will fix that issue of time and progressbar.

[danpastori]

Thank you @kartikcool15 ! This will work for until a fix is in place for sure!

[kartikcool15]

@danpastori : Thanks, I am using amplitudejs since long, So mostly familiar with most of the issues

[jaydrogers]

You're a rockstar @kartikcool15, thanks!

[emico7]

I have found One Temporary Fix for this .... Load the Player in Paused State... Just after Amplitude.init, call Amplitude.paused(); ... Now player will be in paused state, so whenever you play a song, it will fix that issue of time and progressbar.

One typo in the solution above. Amplitude.paused() should be Amplitude.pause() (so "paused" => "pause")
Thank you so much for the fix! It saved me🎉

[danpastori]

With the release of Amplitude 5.3, this has been fixed. The issue stemmed from re-binding events on song changes which was caused by creating a new Audio object. Let me know if any more bugs come up!