howler.js sound is delayed on mobile(ios) on Timeline.

[Rio]

Hi gsap community,

 

This is my first post!  I'm sorry if this is already asked previously.

I am trying to synchronize sound effect and the animation via howler.js .

 

The issue is that the sound does not start on the first attempt of play(). This is happening only on mobile(ios).

There is no problem when I tap on restart(second attempt). Desktop works like a charm.

 

Why this on mobile?

See the Pen 8ba9316d6abf27c301f65e9de0ffc5c5 by riotron (@riotron) on CodePen

[ZachSaucier]

Hey Rio and welcome to the GreenSock forums! Thanks for supporting GreenSock by being a Club GreenSock member.

 

Unfortunately this is something wrong with howler so we can't be of much help. If you put an alert in the click callback you can see that it's being called when it should, howler is just delaying the play for some reason. I'd ask about it on their GitHub repo.

 

FYI there's a bug on desktop if you click restart() before the animation finishes playing.

 

Let us know if we can help with anything else!

[Rio]

Hi Zack,

 

Thanks a lot!  I appreciate you posted the howler GitHub repo. That would be a big help to me.

BTW, I fixed the bug related to restart() . Thanks as well.

 

I would post something here when I found the solution.

 

Rio

[ZachSaucier]

Sorry, the issue isn't related to anything that we do so I don't think it's appropriate for us to post. It's your project and you found it so I think you should post

[Rio]

I have updated my codepen above posted so that I can synchronize the sound and animation as I intended.  I just inserted silent sound in the timeline and the main sound starts off after the offset(3 seconds). If anyone has a better idea, I am grateful with that. Thanks.