<!--Comienza el programa html-->
<html>
<head>
<meta charset="utf-8">
<!--Titulo de la historia-->
<title>SmartStories</title>
<!-- Descripcion de la historia-->
<meta name="descripcion" content="<?php echo $string["descipcion"] ?>">
<!-- Libreria de jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<style type="text/css">
.partes{
width: 100%;
margin: 0px;
height:800px;
}
#parte0{
background-color: black;
}
#parte1{
background-color:blue;
}
#parte2{
background-color: red;
}
#parte3{
background-color: green;
}
body{
background-color: yellow;
margin: 0px;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
alert("Antes");
[].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){
alert("Hola mundos");
section.querySelector("audio").play();
}
else{
alert("Adios Mundo");
section.querySelector("audio").pause();
}
}, false);
});
}, false);
</script>
</head>
<body>
<section id="parte0" class="partes">
<audio>
<source src = "sounds/fondo1.mp3" type = "audio/mpeg" />
</audio>
</section>
<!--Parte 1-->
<section id="parte1" class="partes">
<audio>
<source src = "sounds/fondo2.mp3" type = "audio/mpeg" />
</audio>
</section>
<!--Parte 2-->
<section id="parte2" class="partes">
<audio>
<source src = "sounds/fondo3.mp3" type = "audio/mpeg" />
</audio>
</section>
<!--Parte 3-->
<section id="parte3" class="partes">
<audio>
<source src = "sounds/fondo4.mp3" type = "audio/mpeg" />
</audio>
</section>
</body>
</html>