Proyecto

[Alexis88]

Bienvenido a FDW.

Dentro de cada sección, podrías tener un elemento <audio> con su respectivo archivo de audio cargado y cuando hagas scroll (el cual es un evento del DOM), detectarías si se ha llegado al inicio (borde superior) de la sección (cualquiera de ellas) y ejecutas el audio que contenga.

Código HTML:

<section id = "parte1">
    <audio>
        <source src = "audio1.mp3" type = "audio/mpeg" />
    </audio>
</section>
 
<section id = "parte2">
    <audio>
        <source src = "audio2.mp3" type = "audio/mpeg" />
    </audio>
</section>
 
<section id = "parte3">
    <audio>
        <source src = "audio3.mp3" type = "audio/mpeg" />
    </audio>
</section>
 
<section id = "parteN">
    <audio>
        <source src = "audioN.mp3" type = "audio/mpeg" />
    </audio>
</section>
 

Código Javascript:

[].forEach.call(document.querySelectorAll("[id^=parte]"), function(section){
    window.addEventListener("scroll", function(){
        if (this.scrollY >= section.offsetTop - document.documentElement.clientHeight && 
            this.scrollY + document.documentElement.clientHeight <= section.offsetHeight + section.offsetTop){
            section.querySelector("audio").play();
        }
        else{
            section.querySelector("audio").pause();
        }
    }, false);
});
 

Lo que hace el script es, primero, recorrer al conjunto de elementos cuyo id empiece por "parte" (como veo que tienes a tus secciones) y ejecutar una función por cada uno de ellos. En la función, registraremos el evento scroll en la ventana y cuando este se produzca, es decir, cuando el usuario se desplace con la barra de desplazamiento, se ejecutará otra función.

En esta segunda función, verifico si la cantidad de píxeles desplazados por la barra vertical es mayor o igual a la distancia que hay desde el tope de la sección al tope del documento menos la altura del documento y que, además, la cantidad de píxeles desplazados más la altura del documento sea menor que la altura de la sección más la distancia que hay del tope de esta hasta el tope del documento. Explicado de otra forma, esta condición verifica que la sección sea visible y que el scroll no la haya pasado (que no se haya bajado lo suficiente como para que la sección ya no se pueda ver). Cuando ocurra esto, se tomará al elemento <audio> que contenga la sección y reproduciremos el archivo de audio que contenga; cuando la condición no se cumpla, se pausa dicha reproducción.

Cabe señalar que esto te funcionará teniendo una, cinco o todas las secciones que quieras.

Lo de la reproducción del segundo audio no me ha quedado muy claro. ¿A qué te refieres con "meter en momentos concretos un segundo sonido"? ¿Cuáles son o serán esos "momentos concretos"?

Saludos