Proyecto

ElionTDA · #1 (**permalink**) 14/08/2015, 03:15

Hola a todos/as, estoy metido en un proyecto personal que claramente supera mis conocimientos en javascript(que por desgracia y de momento son escasos), y necesito ayuda por que me he quedado bloqueado.

Explico un poco:
Tengo una pagina html, y el body esta dividido en section, y lo que necesito es que cuando se haga scroll, y se llegue de una section a otra, cambie un audio que se reproduce de fondo, y si se volviera, volver a cambiar a lo que había.
Y ademas de eso, meter en momentos concretos un segundo sonido, sonando los dos a la vez(no se si esto se podrá)

Esto es lo que tengo de momento (la musica que se inicia automaticamente cuando se entra.

Cita:

//////////////
// Musica //
/////////////

/** MUSICA DE FONDO, Y SILENCIARLA CAMBIANDO EL ICONO. **/
var audio = document.createElement("audio");
var cancion = "fondo.mp3";
var estado=false;
audio.src = "sounds/"+cancion;
//audio.loop(); Esto me da error
audio.play();

//HAY QUE HACER QUE SE REPITA EN BUCLE
function silenciar() {
if(estado){
audio.play();
document.getElementById("volumen").src = "images/audioOn.png";
} else {
audio.pause();
document.getElementById("volumen").src = "images/audioOff.png";
}
estado = !estado;
}
// FIN MUSICA

Y esto es el index.php:

Cita:

<?php
//Comienza la sesion
session_start();

//Recoge los datos recogidos del cuestionario del idioma
if (isset($_POST["lang"]))
{
$lang = $_POST["lang"];
if(!empty($lang))
{
$_SESSION["lang"] = $lang;
}
}

//Si ha recigido datos del cuestionario, pone el idioma recogido, si no, el idioma por defecto es el español
if(isset($_SESSION["lang"]))
{
$lang = $_SESSION["lang"];
require "lang/".$lang.".php";
}
else
{
require "lang/es.php";
}
?>


<html>
<head>
<meta charset="utf-8">

<title>SmartStories | <?php echo $string["titulo"] ?></title>

<meta name="descripcion" content="<?php echo $string["descipcion"] ?>">


<meta name="viewsport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">


<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>


<link rel="stylesheet" href="resources/style.css">

<script type="text/javascript" src="resources/main.js"></script>


<script type="text/javascript">

</script>


</head>
<body>


<div id="loadPage">
<p>
<img src="images/load.gif" /><br />
Cargando...
</p>
</div>


<div id="header">
<nav>
<h1><?php echo $string['titulo'] ?></h1>


<form method="POST">
<select name="lang">
<option value="" selected="Selected"><?php echo $string['menu_lenguaje'] ?></option>
<option value="es"><?php echo $string['menu_lenguaje_esp'] ?> </option>
<option value="en"><?php echo $string['menu_lenguaje_eng'] ?> </option>
</select>
<button type="submit"><?php echo $string['menu_lenguaje_enviar'] ?></button>
</form>


<a href= "javascript:"silenciar()"">
<img src="images/audioOn.png" onclick=silenciar() style="cursor:hand" id="volumen">
</a>

</nav>
</div>


<div id="container">


<section id="parte0" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte0">
<p><?php echo $string['parte0'] ?></p>
</div>
</section>


<section id="parte1" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte1">
<p><?php echo $string['parte1'] ?></p>

<a href="#" class="next">next</a>
/**Esto no funciona **/
<script type="text/javascript">
$('.next').click(
function(){

/** MIRAR LO DE LA POSICION DEL SCROLL EN UN PUNTO EN CONCRETO **/
var ypos = $(window).scrollTop();
ypos = 500;
/** Para ver el alto del que dispone el navegador **
document.write(screen.availHeight);
*/
$('html,body').animate({scrollTop:yPos}, 500);return false;
});
</script>

</div>

</section>


<section id="parte2" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte2">
<p><?php echo $string['parte2'] ?></p>
</div>

<div class="fondos">
<img id="flauta" src="images/flauta.png">
</div>

</section>


<section id="parte3" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte3">
<p><?php echo $string['parte3'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte4" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte4">
<p><?php echo $string['parte4'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte5" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte5">
<p><?php echo $string['parte5'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte6" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte6">
<p><?php echo $string['parte6'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte7" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte7">
<p><?php echo $string['parte7'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte8" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte8">
<p><?php echo $string['parte8'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte9" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte9">
<p><?php echo $string['parte9'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte10" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte10">
<p><?php echo $string['parte10'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte11" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte11">
<p><?php echo $string['parte11'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte12" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte12">
<p><?php echo $string['parte12'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte13" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte13">
<p><?php echo $string['parte13'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte14" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte14">
<p><?php echo $string['parte14'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte15" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte15">
<p><?php echo $string['parte15'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte16" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte16">
<p><?php echo $string['parte16'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>


<section id="parte17" data-type="parallax_section" data-speed="10">
<div class="contenido" id="contParte17">
<p><?php echo $string['parte17'] ?></p>
<?php
include("botones.php");
?>
</div>
</section>

</div>
</body>
</html>

Los intentos que he hecho de como cambiar la música han sido un absoluto fracaso, pero si quereis os lo puedo pegar también.

Muchas gracias de antemano a todos.

Alexis88 · #2 (**permalink**) 14/08/2015, 11:07

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:

Ver original<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:

Ver original[].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

ElionTDA · #3 (**permalink**) 15/08/2015, 06:36

Voy a probarlo, la verdad es que estaba haciéndome un quebradero de cabeza, que la verdad me estaba funcionando bastante mal.

Para que veas lo que estaba intentando.

Cita:

////////////
// Musica //
////////////

/** MUSICA DE FONDO, Y SILENCIARLA CAMBIANDO EL ICONO. **/
var audioFondo = document.createElement("audio");
var audio = document.createElement("audio");

// Canciones que se van a usar
var fondos = ["fondo1.mp3", "fondo1.mp3", "fondoo2.mp3", "fondo3.mp3", "fondo4.mp3", "fondo5.mp3", "fondo6.mp3", "fondo7.mp3",
"fondo8.mp3", "fondo9.mp3", "fondo10.mp3", "fondo11.mp3", "fondo12.mp3", "fondo13.mp3", "fondo14.mp3",
"fondo15.mp3", "fondo16.mp3", "fondo15.mp3"]; //se repite el primer fondo y el ultimo fondo.

var sonidosCapa2 =["vozd.mp3", "gritod.mp3"]; // capa dos significa que se reproducen a la vez que los fondos
var estado = false;

// Contadores para los arrays
var contFondo = 0;
var contAudio = 0;

// Direccion de los sonidos
audioFondo.src = "sounds/"+ fondos[contFondo];
audio.src = "sounds/"+ sonidosCapa2[contAudio];

// Esto crea un bucle para todos los fondos
audioFondo.addEventListener('ended', function () {
setTimeout(function () { audioFondo.play(); }, 0);
}, false);

//
audio.addEventListener('ended', function() {
cancion2 = "grito.mp3";
audio.src ="sound/"+cancion2;
audio.play();
}, false);

// Play de los audios
audioFondo.play();
audio.play();

// Silencia toda la musica al clickar en la imagen de audio
//
// Cambiar nombre de la variable estado por mute.
function silenciar() {
if(estado){
audioFondo.play();
audio.play();
document.getElementById("volumen").src = "images/audioOn.png";
} else {
audioFondo.pause();
audio.pause();
document.getElementById("volumen").src = "images/audioOff.png";
}
estado = !estado;
}

//Cambia de cancion a la anterior o la siguiente
//
//
//Comprobar si el audio esta mute, cuando se cambia de canción
function anterior(){
if(contFondo > 0){
audioFondo.pause();
contFondo = contFondo - 1;
audioFondo.src = "sounds/"+ fondos[contFondo];
audioFondo.play();
}
}
function siguiente(){
if(contFondo < fondos.length){
audioFondo.pause();
contFondo = contFondo + 1;
audioFondo.src = "sounds/"+ fondos[contFondo];
audioFondo.play();
}
}

//Hay que ver por que no funciona el cambio por scroll
var pantalla = $(window).height();
var scroll = 0;
var scrollBot = pantalla;
var scrollT = 0;
var ax;

$(window).scroll(function(){
ax = scroll;
scroll = $(window).scrollTop();

if(scroll > scrollBot){
siguiente();
scrollT = scrollT + scroll - ax;
scrollBot = scrollBot + scroll - ax;
}

if(scroll < scrollT){
anterior();
scrollT = scrollT - scroll;
scrollBot = scrollBot - scroll;
}
});

Probare esta tarde lo que me has dicho.

Y lo de un segundo sonido en momentos concretos lo he medio conseguido ya. Me refería a reproducir dos sonidos a la vez, que al principio no me funcionaba y no sabia si no se podía, o habría que hacer algo en especial. Lo que me falta es saber si esos "segundos sonidos" se pueden reproducir con retardo, por que encontré una función getStartDate(), pero aun no he probado como funciona.

(ej de lo que me refiero: que este sonando de fondo un ambiente de pájaros y mar, y en un momento preciso, después de 5 segundos suene un disparo.)

Muchas gracias por la ayuda ;)

Alexis88 · #4 (**permalink**) 15/08/2015, 10:14

Cuando estuve elaborando y probando el código que dejé, llegaron a reproducirse todos los sonidos a la vez, es decir, por ese lado no hay problema.

El retardo en el inicio de la reproducción del segundo sonido lo puedes llevar a cabo con el método setTimeout.

Código Javascript:

Ver originalsetTimeout(function(){
    sonido.play();
}, 5000);

Siendo el segundo argumento de dicho método el tiempo dado en milésimas de segundo, por eso fue que coloqué 5000 que representa a 5 segundos.

Saludos

ElionTDA · #5 (**permalink**) 16/08/2015, 06:40

Estuve probando el código que me pasaste, y no me funcionaba :S no se que habré hecho mal, de todos modos, mañana le dedicare más tiempo a ver si encuentro el error.

Solo se que el script no se me ejecutaba (lo comprobé a lo cutre, con dos alert("Hola mundo"); antes de empezar el script, y un alert("Adios Mundo"); una vez empieza el script, y el "Hola mundo" me salto, pero el "Adios" no.

Mañana indagare en ello, dado que hoy no dispongo de tiempo.

Nuevamente darte las gracias por la ayuda ;)

Alexis88 · #6 (**permalink**) 16/08/2015, 09:44

Solo por si acaso, ese código debe de ir después de todos los elementos y antes de la etiqueta </body> para que así cargue luego de la carga del DOM (los elementos del documento) y pueda afectarlos. Si quieres ponerlo en la cabecera del documento, tendrás que insertarlo dentro de esto:

Código Javascript:

Ver originaldocument.addEventListener("DOMContentLoaded", function(){
    //Aquí va
}, false);

El evento DOMContentLoaded se ejecuta luego de haber cargado los elementos del documento, por lo que al suceder esto, se ejecutará una función la cual llevará a cabo las instrucciones necesarias para lograr lo que buscas.

Saludos

ElionTDA · #7 (**permalink**) 17/08/2015, 05:24

Llevo unas cuantas horas intentándolo pero nada, y ya desesperado, he creado un documento nuevo, con solo 4 secciones, y todo (css y js) metido en el mismo documento.

Cita:

<html>
<head>
<meta charset="utf-8">

<title>SmartStories</title>

<meta name="descripcion" content="<?php echo $string["descipcion"] ?>">


<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>


<section id="parte1" class="partes">
<audio>
<source src = "sounds/fondo2.mp3" type = "audio/mpeg" />
</audio>
</section>


<section id="parte2" class="partes">
<audio>
<source src = "sounds/fondo3.mp3" type = "audio/mpeg" />
</audio>
</section>


<section id="parte3" class="partes">
<audio>
<source src = "sounds/fondo4.mp3" type = "audio/mpeg" />
</audio>
</section>
</body>
</html>

Al recargar la pagina(F5), me sale la alerta del javascript "Antes". Y no se oye nada.
Despues al iniciar el scroll me salta la alerta "Adios mundo" del js(el else), y me salta 4 veces, una por cada parte.
Y esto me pasa cada vez que hago un solo scroll hacia abajo, o hacia arriba. A excepción de cuando llego al top, que salta el alert("Hola mundo"); y empieza a sonar la canción. Pero únicamente en ese caso.

Adicionalmente me ha surgido otra duda, el hecho de que cada vez que se haga un scroll, se comprueben todas las partes no puede sobrecargar la pagina mucho y hacer que vaya muy lenta?, me refiero, esta tiene solo 4 secciones, pero si la hiciera de 20 o 30 secciones...

Muchas gracias por tu tiempo.

Alexis88 · #8 (**permalink**) 17/08/2015, 13:13

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

ElionTDA · #9 (**permalink**) 17/08/2015, 14:48

Muchas gracias por la ayuda. Y tendré en cuenta a la hora de pegar el código de fijarme en que sea como me has dicho ;)

Un saludo