Audio en scroll en un DIV

Question

Quiero habilitar el audio en un área seleccionada de la página. Si el usuario desplaza este elemento, el audio se detendrá. Encontré esta solución, pero el problema es que los valores de los píxeles son diferentes en el orden de la resolución de la ventana, el monitor, el tipo de navegador, etc.

var playing = false;
var audioElm = $('#soundTour').get(0); $(window).scroll(function() {
  var pageScroll = $(window).scrollTop();
  if(!playing && pageScroll > 500 && pageScroll < 3000){
    audioElm.play();
    playing = true;
  }else if(pageScroll > 3000 || pageScroll < 500){
    audioElm.pause();
    playing = false;
  }
});
 

Para eso me gustaría encontrar una solución en un DIV. Mi única página es así:https://alvarotrigo.com/fullPage/examples/navigationV.html#firstPage y quiero que el sonido de fondo, por ejemplo, se reproduzca automáticamente durante la primera y la segunda página, y se detenga cuando el usuario se una a la tercera página.

¿Alguna ayuda?

Answer 1

En el código siguiente, el sonido comienza a reproducirse cuando el 30% del tercer bloque es visible.

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      body { margin: 0; padding: 0; }
    </style>
  </head>
  <body>
    <audio src="/sound.wav"></audio>
    <div style="height: 100%; background: #ff5555">first page</div>
    <div style="height: 100%; background: #55ff55">second page</div>
    <div id="d3" style="height: 100%; background: #5555ff">third page</div>
    <script>
     const el = document.querySelector("audio");
     let playing = false;
     window.addEventListener('scroll', (e) => {
       const scroll = e.target.body.scrollTop;
       const rect = document.getElementById("d3").getBoundingClientRect();
       const top = rect.top;
       if (!playing && top > rect.height / 3) {
         el.play();
         playing = true;
       } else if (top < rect.height / 3) {
         el.pause();
         playing = false;
       }
     });
    </script>
  </body>
</html>

Actualización después de los comentarios:

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      body { margin: 0; padding: 0; }
    </style>
  </head>
  <body>
    <div id="d1" style="height: 100%; background: #ff5555">first page</div>
    <div id="d2" style="height: 100%; background: #55ff55">second page</div>
    <div id="d3" style="height: 100%; background: #5555ff">third page</div>
    <script>
     const soundfiles = ["sound.wav", "sound2.wav", "sound.wav"];
     const divIds = ["d1", "d2", "d3"];
     const els = soundfiles.map((filename, index) => {
       const el = document.createElement("audio");
       el.src = "/" + filename;
       document.body.appendChild(el);
       return el;
     })
     const playing = new Array(divIds.length).fill(false);
     window.addEventListener('scroll', (e) => {
       const scroll = e.target.body.scrollTop;
       const rects = divIds.map(id => document.getElementById(id).getBoundingClientRect());
       const tops = rects.map(rect => rect.top);
       tops.forEach((top, ind) => {
         if (!playing[ind] && top <= rects[ind].height * 2 / 3 && top > - rects[ind].height * 1 / 3) {
           els[ind].play();
           playing[ind] = true;
         } else if (playing[ind] && (top > rects[ind].height * 2 / 3 || top < -rects[ind].height * 1 / 3)) {
           els[ind].pause();
           playing[ind] = false;
         }
       });
     });
    </script>
  </body>
</html>