0

I have a one page scrolling website, and what I would like to do is fade in and out ambient sounds per section. I have found a few libs that fade sound in and out on pixels but being that this site scales I cant get them to trigger properly.

Basically it would be for each section:

<div class="section_content" id="1"> /// this is the section that would need to trigger audio file 1
  <div class="main_image">
  </div>
  <div class="main_content">
  Text content and information here 
  </div>
</div>

<div class="section_content" id="2"> /// this is the section that would need to trigger audio file 2
  <div class="main_image">
  </div>
  <div class="main_content">
  Text content and information here 
  </div>
</div>

https://github.com/kamblack/AudioFade/blob/master/README.md

This was the library I tied but since its based off of pixels it wont quite work.

jamie
  • 152
  • 12
  • what's scaling the divs? just css? – zfrisch May 20 '19 at 20:24
  • Just css using flexbox and in some cases some images are set to 100vh. – jamie May 20 '19 at 20:28
  • https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport?rq=1 can you use this related question to check if a particular element is currently visible and do the fading in/out based on that? – Nicolás Marzano May 20 '19 at 20:30
  • @jamie Are you only allowing scrolling from one div to another? As in, I couldn't see half of one and half of another? – zfrisch May 20 '19 at 20:57
  • @zfrisch all the content takes up at least the full view port or longer. I would say most sections are about 1.5 to 3 full scrolls on a desktop monitor and a bit more on mobile. – jamie May 20 '19 at 21:08
  • @jamie If that's the case, are there situations where 2 different audios would be playing simultaneously? – zfrisch May 20 '19 at 21:09
  • @zfrisch Nope. Each section has a main div then children div inside with their specific layouts. I was planning on trying to track the overall main divs per each section. – jamie May 20 '19 at 21:25
  • @jamie Okay, I think I understand. I'll see if I can help. Could you post this information in the main question (instead of the comments), and if you have it, possibly a screen of what the page looks like. – zfrisch May 20 '19 at 21:29
  • @zfrisch Done with the basic structure of the site! – jamie May 20 '19 at 21:33
  • @jamie great! Last thing. How are you embedding audio? Just a library, or did you write your own code? – zfrisch May 20 '19 at 22:29
  • @zfrisch the two ways I tried it was just with simple audio tags and js. I found a few solutions here and other places that I tried to modify using the above JS library and i tried to modify code that works for video players in the viewport. – jamie May 21 '19 at 14:49

0 Answers0