Linking soundbite to timeline

[payne199]

I am looking to add a soundbite to my timeline. By all appearances (to me) the codepen I included should do it.  

   I have created the audio element.

   I have added it as a function to the timeline.

But it will not play.

Would someone shed some light on this dilema for me?

Thank you. 

(A great soundbite, huh?)

See the Pen QWLYeMz by don199 (@don199) on CodePen

[ZachSaucier]

Hey Payne,

 

That soundbite played immediately when I opened this page (quite loudly), hah. So yes, it does work. My guess is that it's a conflict with CodePen. Or the fact that it auto-plays (some browsers try to prevent that). Or maybe that the file is not done loading by the time it's supposed to play.

 

What's your end goal?

[OSUblake]

2 hours ago, payne199 said:

(A great soundbite, huh?)

 

Yep.

 

See the Pen epLjrG by osublake (@osublake) on CodePen

 

 

1 hour ago, ZachSaucier said:

Or maybe that the file is not done loading by the time it's supposed to play.

 

That's probably the issue. loading starts whenever you set the source, which you're doing inside your function, so it won't play immediately unless it's cached. 

 

[PointC]

Good grief. It's back. The last time you posted that demo I couldn't get that song out of my head for several days. Thanks a lot Blake.? 

[payne199]

Hi Guys. Yeah I see it plays here, without any problem, but not on my machine. I tried just using a simple typewriter 'ding' to sound, and that doesn't go either. Perhaps it IS due to auto-play. What I am wanting to do, ultimately, is construct a 5-minute video for a friend's 40th bday. Although this simply tween does not show this in any way. Can you offer me advise as to how to load the sound first? To try that angle? (Blake, Craig. I thought you guys would get a kick out of that!).

[ZachSaucier]

1 hour ago, payne199 said:

Can you offer me advise as to how to load the sound first?

One way to do it

 

See the Pen RwbdWvR?editors=0010 by GreenSock (@GreenSock) on CodePen

[payne199]

Thanks for the info, guys. I have decided to run with a button to start things off and have updated the codepen to reflect that. On initial play, the sound is always delayed compared to the image coming on the screen. But after that first run, it will always run correctly, in sync. But of course, if I were to back-out of the page completely and go in again, the initial run will be out of sync. I looked for a similar problem in the forum but did not find one. Could you explain to me why this is occuring? The initial run has to be on the money.

[OSUblake]

1 hour ago, payne199 said:

On initial play, the sound is always delayed compared to the image coming on the screen.

 

Did you look at the demos Zach and I made? The delay happens because you are loading the audio source in the function. It's not going to load until the function is called, thus causing a delay.

 

But this really isn't a GSAP question. It has to do with audio and media APIs.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

 

You need to make sure the audio is loaded or can at least play through before starting your timeline. This enables the play button once the audio can play through.

 

See the Pen 3d026b6fcd95fc1e2fa155a02664cdef by osublake (@osublake) on CodePen

 

 

 

[payne199]

Wow! I now get it. Thanks for taking the extra time with me. You guys (and GSAP) rock!!