ScrollTrigger - play audio when scroll to certain point on the page

[LSchneiderman]

How would I play an audio clip as a loop when I scroll to a certain point in the page using ScrollTrigger and GSAP?

See the Pen mdmzjBN?editors=1111 by lschneiderman (@lschneiderman) on CodePen.

[OSUblake]

You can use one of the many callbacks, or adding a callback to a timeline with .add(). 

 

But it doesn't look like you've attempted anything, and TweenMax is deprecated. Please see the Migration Guide.

 

And audio can be a little difficult to work with. It won't play until the user has clicked on something.

[LSchneiderman]

@OSUblake is clicking the only action that will cause audio to play?

[OSUblake]

Yes, but it's just one time thing. They don't have to click to hear additional audio. 

 

In this demo, if don't click on the screen within 3 second, the audio won't play and you'll see this error.

 

 

 

[mikel]

 

Hey Blake,

 

Greetings from the coast

 

See the Pen abBOwbR by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

[LSchneiderman]

Can scrolling be the user action that triggers audio at a certain point? And what if I had the user click to play one audio file. Do I need them to click again to play a second audio file?

[LSchneiderman]

@mikel I need it to work with ScrollTrigger.

[OSUblake]

I posted the wrong demo above.

 

See the Pen WNjLVER by GreenSock (@GreenSock) on CodePen.

 

3 hours ago, LSchneiderman said:

Do I need them to click again to play a second audio file?

 

No. The the click is just a one time thing. The user has to interact with the page somehow. @mikel showed that it can work with mouse events, so maybe you could do something like wait for a mouse or scroll event, and play the audio with the volume at 0, and then remove those events. Then when you need to actually play the audio, restart the audio with the volume at normal.

 

Your best bet is to search around for solutions to this problem. This might be a good start.

https://stackoverflow.com/questions/12206631/html5-audio-cant-play-through-javascript-unless-triggered-manually-once

 

[mikel]

Hey @LSchneiderman,

 

Of course you can also use GreenSock ScrollTrigger.

Turn up the volume.

 

See the Pen yLbZJra?editors=1010 by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

 

[LSchneiderman]

The "onEnter" function was what I needed. Thank you, @mikel!

[PapaDeBeau]

QUESTION: Forgive me if I missed it, but I think the question was "how do you 'trigger' audio with scroll trigger at a certain point?" This is what I would like to know. I don't want to start a new question so I am hoping this gets some attention still. Thank you. I love GSAP. 

[akapowl]

 

Hello there.

As the user mentioned, the onEnter callback of ScrollTrigger was what she needed to make it be triggered on scroll.

Here is a codepen demo listing all of ScrollTrigger's available callbacks. What you call within them is up to you; you can e.g. play or pause some audio within these callbacks...

See the Pen qBdeVJY by GreenSock (@GreenSock) on CodePen.

 

 

 

...like so, e.g..

See the Pen qBLaoQQ by akapowl (@akapowl) on CodePen.

You'll find information you need going forward in the ScrollTrigger docs.

https://greensock.com/docs/v3/Plugins/ScrollTrigger

And you'll find a whole lot of information for how to use audio in your code on the MDN Web docs.

https://developer.mozilla.org/en-US/search?q=audio

 

I hope this will help.

 

[Cassie]

Just an additional FYI that users have to interact with the page before the audio will play. One of the allowed interactions is a 'click' on the page

https://stackoverflow.com/questions/50490304/how-to-make-audio-autoplay-on-chrome
 

See the Pen RwEGMzw?editors=1010 by GreenSock (@GreenSock) on CodePen.