Glitchy and plopping sounds during animations

[chris_hengst 3 Likes (Newbie)]

 

Hi there!

 

I’m facing some sound issues with my app and was wondering if maybe one of you guys had similar issues...

 

I’ve attached a video link (https://www.dropbox.com/s/msth8o10mrwvqdk/sound_bug.mp4?dl=0) where you can see and hear what’s happening. The plopping is totally random and appears mostly when there is a lot of interaction with the interface (opening modals, dragging the wheel > all handled by gsap). If I set this modules do “display:none”, to have a clean interface, the sound issue does not appear.

 

Now you would say: We need some code... The app’s code is currently a big MESS. I cannot reproduce the issue in CodePen and to be honest, I don’t want to share my complete project folder. The app uses a lot of jQuery and the DOM is very stuffed. The ‘wheel’ is an inline SVG asset. I’m currently recoding this project with vue.js to get it A LOT leaner but this will take me a while and I would love to get rid of the sound issue before that... So I’m just taking a shot here.

 

I’m happy for any kind of advice! I’m not sure if it is actually related with gsap, or maybe the sound issue appears because of the sum of nonoptimal code, but maybe there is some little ‘fix’ out there someone of you guys know.

 

The issue appears in every browser. On my local machine and on mobile devices (iOS more frequent than Android though). Even on the ‘brand new’ iPhone X. The app uses cordova.

 

I’ve tried a lot of different JS sound libraries (tone.js, howler.js, ...) currently I’m using pizzicato.js. Always the same issue. Sounds are handled by the WebAudio API.

 

If you want to see the app in action and you are using an iOS device:

With the following codes you can download the app for free on the Apple App Store (codes only work once...)

 

TJFXHHXAHP9J

KA7EA96TXEEP

4RNKFN6NH39M

AWMFYTJE6AYJ

3WL76FLXNRFN

FHEWJ7JYLFW9

WM4WN4AHYAFK

67E3AXNMXNRY

K9Y37PFEFXWR

TJLLWYFP3RWF

TWHFKJ9J34YF

3M9XYTRPLA9W

JAWLR9EYEFAA

P3HXWEW66W7T

Y73LPRM939PJ

 

Thanks!

[Dipscom 2,815 Likes (Superhero)]

Hello @chris_hengst,

 

Welcome to the forums!

 

I'm not a sound designer nor have experience with sounds and the web other than having the occasional background elevator soundtrack added to a cheesy site.

 

But, I think this issue of yours will be more a case of the "sum total" of the things that are going on in your app than a GSAP thing. GSAP alone only, at its core, just crunches numbers, it won't touch your sound files unless you tied them to a timeline and, even there, it won't cause it to play unless you have conflicting code trying to play and stop said timeline at the same time.

 

As you said yourself, you're recoding it all. Better to wait until you clean your codebase up first before spending time troublesooting something that might go away after the spring clean.

 

[chris_hengst 3 Likes (Newbie)]

@Dipscom thank you for your reply! Yeah, I'll probably have to see if the recoding will do the trick. I've already assumed that this would not be a GSAP problem but I wanted to give it a shot here because this 'bug' drives me crazy for a while now  So if anyone has any further suggestions I'm happy to try them out! Thanks again!