Te recomiendo no usar mensajes de alerta para depurar el código; lo mejor es hacerlo desde la consola del navegador.
Por otro lado, haciendo algunas pruebas con lo que hiciste, me di con la sorpresa de que el algoritmo funcionaba cuando cambiaba a
document.documentElement.clientHeight por
window.innerHeight; lo curioso es que ambos devuelven el mismo valor que no es otra cosa que la altura del documento (de lo que se está viendo en pantalla) sin incluir al menú del navegador ni a las barras de desplazamiento ni a los bordes y margen. Ojalá que alguien en el foro que sepa más de esto, nos lo pueda explicar mejor.
En fin. Esto quedaría así:
Código Javascript
:
Ver originaldocument.addEventListener("DOMContentLoaded", function(){
[].forEach.call(document.querySelectorAll("[id^=parte]"), function(section){
window.addEventListener("scroll", function(){
if (this.scrollY >= section.offsetTop - this.innerHeight &&
this.scrollY + this.innerHeight <= section.offsetHeight + section.offsetTop){
section.querySelector("audio").play();
}
else{
section.querySelector("audio").pause();
}
}, false);
});
}, false);
Por cierto, hice la prueba con 200 secciones, cada una con su respectivo
<audio> y la consecuente carga del archivo de audio que contiene, y no hubo ningún problema; todo cargó en aproximadamente 7.5 segundos (haciendo varias pruebas) y como supongo que tendrás menos secciones que las 200 de mi prueba, pues, la carga tomará menos tiempo.
Y solo como consejo para el uso del foro; cuando vayas a mostrar código, por favor, utiliza el
highlight respectivo para que sea más legible. Lo puedes encontrar justo a la derecha del botón de cita.
Saludos