I am trying to sync an audio wave gif animation with the audio file it is animating. I tired this approach and have success with the audio working on tap, but the animation doesn’t play. When I load the effect to preview in Instagram, the animation begins playing automatically and no sound can be heard. The sound works in the Spark AR preview, but the animation doesn’t. I’m pretty new to Spark - the answer may right in front of me.
Sometimes the audio has issues playing on device if you encode it incorrectly. Check that your file matches the specs in the docs Importing audio clips
Another weird thing about audio on device is that it won’t start playing immediately when you request it. It needs to load the file into memory, which takes some time, meaning it will be out of sync with your animation sequence. This tends to only be super noticeable with long audio clips, but it seems like that might be the case here.
You can force the audio to load into memory when the effect starts by playing it immediately, but set the volume to zero. Then when you want to play it, set the volume to 1 and stop/play the audio again. You might need to add a very small delay so you can be sure it’s stopping and then playing the clip, and not the other way around.
The animation clip is probably playing automatically because that’s the default behavior. You can stop it from playing automatically by setting the current frame manually.
I may have done a poor job of explaining my goal and think there could be an easier solution. I’ve used this thread as guidance in addition to your suggestion about a delay and the reddit example also referenced in my original post.
I’ve attempted two solutions that I’m including screenshots for. Approach one follows the loops animation delay example modified to include the sound I am working to sync with the animation. What I want to happen is for the initial animation to be triggered by the target image being detected, then the user can control the play and stop by tapping their screen.
The second screenshot I’m including shows an approach that triggers the animation and sound with a screen tap. After the initial tap, the animation + sound loop. This gets the job done, but I want to combine the two approaches if I can.
(I’m a visual guy, so if answers could include screenshot examples that would be super appreciated)
Do you think you can make a simple test case and share the project? It’s easier to noodle with the wires and then give an explanation after testing and verifying the solution.