Is there a way to make sound change as you scroll down?

#1

Is there a way to make sound / background music change as you scroll down? Shutterstock has a site that does a background track / audio change based on which section you are in, triggered by scrolling and named anchors. Pretty cool. Wondering if there’s a way Hype can emulate this?

E X A M P L E …

https://www.shutterstock.com/blog/trends/2020-creative-trends

note - you have to turn sound on manually in the top intro section. then scroll down or use sections on left hand side.

#2

Yes - You can do this.

This set-up would have a few elements but basically reduces down to two things which would use JavaScript:

  1. Get the vertical scroll of the element in question such as the window. You can find out this value using the scrollTop property. You then use a conditional such as “if/else if” or “switch” to do this comparison. e.g. if the scroll of the element is greater than 100 pixels and less than 250 pixels then play this audio track.

  2. Control the audio with “Pause” & “Play”. The audio would be placed in a div such as a Hype rectangle element using an audio tag in the innerHTML of the element. Read about this process here in Hype’s Documentation.

1 Like
#3

and there is no way to trigger the audio - ie load and unload different audio - with waypoints?

#4

Yes, You can - though I have not worked with waypoints in this fashion. And another approach resembling waypoints that You may wish to investigate is “intersectionObserver”.

So with “waypoints” (“Enter/Exit Viewport” in Hype’s “Action Inspector”) You could simply assign the Actions “Play/Stop Sound…” to the triggering element.

Why I have not used this set-up is the lack of fine control. For example: If the user has a large screen, adjusting the window size downward can trigger the “Enter Viewport” action if the element comes into view - causing this newly visible element to start playing. Now the user is (accidentally) controlling the interaction not You.

Using the waypoints/viewport scenario might fine for Your needs though.

1 Like
#5

Thanks for the input JimScott.

Good point re screen size - and i have had some mixed results with getting waypoints to fire consistently in the past, ie arrow key seems to work fine but some times fast manual scrolling seems to break/bypass the waypoints trigger, especially when i am scrolling back up (or at least that’s how i remember it).

I will mess with this based on your suggestions… see if i can get it to work.

#6

I am happy to assist You with the general mechanism (code). My suggestion would be to set-up a simple example that illustrates the key aspect - the scroll position triggering (or not) a given sound file. Two triggering ranges (and two sounds) should do as a trial.

Here is a nice example of using scrollTop and the onscroll event together.

1 Like