Problema con reproductor.addEventListener('ended'

fab2160225 · #1 (**permalink**) 02/06/2017, 07:55

Buenas, tengo un problema con esa función, tengo una pagina donde quiero reproducir unos archivos de audio,
El texto del audio a reproducir si cambia, sin embargo siempre reproduce el mismo archivo de audio

el código es el siguiente:

Cita:

<audio id="miaudio" controls="controls">
Tu navegador no soporta el elemento <code>audio</code>.
</audio>

<h2>Sonando...</h2>
<div id="texto"></div>

<h2>Canciones</h2>
<ul id="listado"></ul>

<script>
var reproductor = document.getElementById('miaudio');
function cargarCancion(numero){

// Cargamos la canción de forma dinámica

var texto = document.getElementById("texto");
texto.innerHTML = lista[numero][1];

var source= document.createElement('source');
source.src=lista[numero][0];
source.type='audio/ogg';

reproductor.appendChild(source);

reproductor.load();
reproductor.play();
}

function aleatorio() {
return Math.round(Math.random()*(lista.length-1));

}

/*function aleatorio() {
return Math.round(Math.random()*(lista.length-1));

}*/
var lista = [['1.mp3','Audio 1'],['2.mp3','Audio 2'],['3.mp3','Audio 3']];
var listado = document.getElementById('listado');
for (x=0;x<lista.length;x++) {
var item = document.createElement('li');
item.innerHTML = lista[x][1];
listado.appendChild(item);
// lista.appendChild(item);// nuevo
}
cargarCancion(aleatorio());
reproductor.addEventListener('ended',
/* function refresh()
{
location.reload(true); la funcion de refresco si funciona si la habilito
}*/

function(){
//alert(+aleatorio); la alerta me devuelve valor NaN si la habilito
//"document.location.reload();"
cargarCancion(aleatorio()); // si realiza el cambio en la pista de audio del texto, paro siempre reproduce la misma

});

</script>

<br/><br/>
<hr>

</body>
</html>

Espero alguien me pueda ayudar, utilizo crhome.
Gracias

fab2160225 · #2 (**permalink**) 02/06/2017, 08:35

una prueba que he hecho es cambiar la variable de id ="texto" por la de Source, y en ese caso no hay cambio siempre se mantiene el mismo archivo de audio

Alexis88 · #3 (**permalink**) 02/06/2017, 13:03

En lugar de crear un elemento <source> para cambiar de canción, mejor hazlo directamente en el atributo src del reproductor.

Código Javascript:

Ver originalreproductor.src = "cancion.mp3";

fab2160225 · #4 (**permalink**) 02/06/2017, 14:31

Gracias, puedes explicármelo mejor, no acabo de entender dónde debo realizar el cambio, agradezco tu paciencia

Alexis88 · #5 (**permalink**) 02/06/2017, 15:55

La parte en la que creas al elemento <source> y luego le asignas el archivo de audio, reemplázala por el ejemplo que te mostré pero con el nombre real del archivo que, por lo que veo, es lista[numero][0].

fab2160225 · #6 (**permalink**) 03/06/2017, 02:02

Buenas, gracias por la ayuda, a ver si entiendo, me dices que cambie esta parte :

Código PHP:

  var source= document.createElement('source'); 
    source.src=lista[numero][0]; 
    source.type='audio/ogg';

por esta otra:

Código PHP:

  reproductor.src = lista[numero][0];

ya lo hice pero sigue reproduciendo el mismo fichero una y otra vez.
por si es más simple también me serviría una reproducción contínua de todos los ficheros uno tras otro.
Gracias otra vez por tu paciencia

Alexis88 · #7 (**permalink**) 03/06/2017, 10:26

Creo que sería conveniente observar la consola del navegador para ver si se está mostrando algún mensaje de error que indique la posible causa del problema; aunque, esa llamada al método .load(), me parece innecesaria. De cualquiera manera, échale un vistazo a este pequeño reproductor que hice. Te puede servir de guía.

fab2160225 · #8 (**permalink**) 03/06/2017, 15:06

Buenas, el ejemplo que me has puesto me vale perfectamente, pero cuando lo paso al wampserver, no funciona, no sé que me pasa con este código.

Este es el código que pongo, solo cambio el primer archivo que lo tengo en la misma carpeta que el php.

aún poniendo todas tus canciones no me funciona.

Código PHP:

  <html> 
 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>FdW - Reproductor de música</title> 
<style> 
img, label, audio{ 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 
 
img{ 
    width: 200%; 
} 
</style> 
<script type="text/javascript"> 
"use strict"; 
/** 
 * Reproductor de música 
 * 
 * @author Alexis88 
 */ 
 
var Reproductor = { 
    init: function(){ 
        //text-align: center; 
        //Arreglo de canciones con sus respectivos atributos 
        Reproductor.canciones = [ 
            { 
                artista: "Circa Waves", 
                cancion: "Uno", 
                ruta: "uno.mp3" 
            }, 
            { 
                artista: "Circa Waves", 
                cancion: "Fire That Burns", 
                ruta: "http://umgukvirgin.edgesuite.net/D2C/circawaves/circawaves-firethatburns.mp3", 
                portada: "https://s-media-cache-ak0.pinimg.com/originals/51/95/70/5195701e847bc0a38f25f5721bce92f1.jpg" 
            }, 
            { 
                artista: "Circa Waves", 
                cancion: "Stuck", 
                ruta: "http://umgstore.edgesuite.net/D2C/circawaves/Stuck.mp3", 
                portada: "http://ksassets.timeincuk.net/wp/uploads/sites/55/2017/03/2017_CircaWaves_Press_080317.jpg" 
            } 
        ]; 
         
        //Establecemos los elementos de portada, título, reproductor y contador 
        Reproductor.portrait = document.querySelector("#portrait"); 
        Reproductor.title = document.querySelector("#title"); 
        Reproductor.player = document.querySelector("#player"); 
        Reproductor.cuenta = 0; 
         
        //Se reproduce la primera canción 
        Reproductor.tocar(); 
    }, 
     
    tocar: function(){ 
        //Se establece la portada, artista y título y el archivo de audio 
        Reproductor.portrait.src = Reproductor.canciones[Reproductor.cuenta].portada; 
        Reproductor.title.innerHTML = Reproductor.canciones[Reproductor.cuenta].artista + " - " + Reproductor.canciones[Reproductor.cuenta].cancion; 
        Reproductor.player.src = Reproductor.canciones[Reproductor.cuenta].ruta; 
       
        //Se actualiza el contador 
        Reproductor.cuenta = Reproductor.cuenta == Reproductor.canciones.length - 1 ? 0 : ++Reproductor.cuenta; 
         
        //Se reproduce la canción 
        Reproductor.player.play(); 
       
        //Cuando acabe una canción, se reproduce la que sigue 
        Reproductor.player.addEventListener("ended", Reproductor.tocar); 
    } 
}; 
 
//Al cargar la página 
</script> 
</head> 
 
<body> 
    <img id="portrait" /> 
    <label id="title"></label> 
    <audio id="player" controls="controls" type="audio/mpeg"></audio> 
</body> 
</html>

Siento las molestias que te causo, casi siempre entiendo las cosas a la primera pero esto se me está atragantando

Alexis88 · #9 (**permalink**) 03/06/2017, 23:47

Te faltó lo más importante: la línea de código que inicia todo. Está justo al final, pero creo que no alcanzaste a verla.

Código Javascript:

Ver original//Al cargar la página
document.addEventListener("DOMContentLoaded", Reproductor.init);

Si vas a usar mi ejemplo como base, te sugiero no eliminar propiedades de los objetos en donde están las canciones, que es lo que veo que hiciste con la primera, o se generará un error.

fab2160225 · #10 (**permalink**) 04/06/2017, 09:50

Buenas, muchas gracias, es lo que tiene trabajar en remoto, que no se ve bien, y a veces no se copia todo.
Una pequeña duda que me queda ( he estado buscando y leyendo pero no me queda claro), es posible realizar la carga de los nombres de los archivos a reproducir sin poner el nombre (algo similar a una consulta que devuelva el nombre de todos eso archivos sin tener que escribirlos cuando algo se modifica u o añade).
Agradecerte una vez más tu ayuda

Alexis88 · #11 (**permalink**) 04/06/2017, 14:00

Imagino que te refieres a realizar una consulta a la base de datos y que de dicha consulta obtengas los nombres para luego ir reproduciendo los respectivos archivos de audio. Si a eso te refieres, pues, sí; sí se puede. Con una petición asíncrona (AJAX), podrías cargar toda esa información como un objeto JSON (desde el lado del servidor con algún lenguaje como PHP); en el código JavaScript lo parsearías (por ejemplo, con el método JSON.parse()) y, finalmente, te quedaría un arreglo de canciones, como el del ejemplo.

fab2160225 · #12 (**permalink**) 04/06/2017, 15:50

Buenas, si leí sobre consulta en base de datos, pero también leí la posibilidad de hacerlo directamente sobre la carpeta donde se encuentran los archivos, con json y JavaScript, a ver si encuentro algún ejemplo para llevarlo a cabo. mil gracias por la ayuda

Alexis88 · #13 (**permalink**) 04/06/2017, 16:31

También es posible, solo que pensé en la posibilidad de hacerlo con una base de datos porque es la manera más común y de la que posiblemente encuentres más ejemplos al respecto.

fab2160225 · #14 (**permalink**) 05/06/2017, 02:54

Buenas, aunque ya voy a cerrar el tema porque ya me funciona, una última pregunta respecto a listar los archivos.
He montado este código:

Código PHP:

  <?php 
$directorio = "/wamp/www/audio"; 
 
// 
// 
$gestor_dir = opendir($directorio); 
while (false !== ($nombre_fichero = readdir($gestor_dir))) { 
    $ficheros[] = $nombre_fichero; 
} 
  
  
 if ($gestor = opendir('.')) { 
    while (false !== ($entrada = readdir($gestor))) { 
        if ($entrada != "." && $entrada != "..")  
 
        { 
          $result[]= '{ruta:"'."$entrada".'"}'; 
           
        } 
    } 
    closedir($gestor);     
} 
 
$string[] = implode(",", $result).""; //concateno el punto al final  
 
$resultado=$string; 
 
?>  
<script type="text/javascript"> 
    // obtenemos el array de valores mediante la conversion a json del 
 
    // array de php 
 
    var arrayJS=<?php echo json_encode($string);?>; 
  
    // Mostramos los valores del array 
 
    for(var i=0;i<arrayJS.length;i++) 
    { 
        document.write("<br>"+arrayJS[i]); 
    } 
</script>

que me genera este resultado:

Código PHP:

  {ruta:"dos.mp3"},{ruta:"Musicprueba1.mp3"},{ruta:"tres.mp3"},{ruta:"uno.mp3"}

el cual puesto en tu código funciona sin problemas, pero si añado el código a tu al tuyo no funciona (seguro que no lo hago bien) si me hechas una mano te lo agradezco.

este es el resultado todo junto:

Código PHP:

  
<html> 
<?php 
$directorio = "/wamp/www/audio"; 
 
$gestor_dir = opendir($directorio); 
while (false !== ($nombre_fichero = readdir($gestor_dir))) { 
    $ficheros[] = $nombre_fichero; 
} 
   
 if ($gestor = opendir('.')) { 
    while (false !== ($entrada = readdir($gestor))) { 
        if ($entrada != "." && $entrada != "..")  
 
        { 
          $result[]= '{ruta:"'."$entrada".'"}';           
        } 
    } 
    closedir($gestor);     
} 
 
$string[] = implode(",", $result).""; //concateno el punto al final  
$resultado=$string; 
?>  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>FdW - Reproductor de música</title> 
<style> 
img, label, audio{ 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 
 
img{ 
    width: 200%; 
} 
</style> 
<script type="text/javascript"> 
'use strict'; 
/** 
 * Reproductor de música 
 * 
 * @author Alexis88 
 */ 
 
var Reproductor = { 
    init: function(){ 
        //text-align: center; 
        //Arreglo de canciones con sus respectivos atributos 
        Reproductor.canciones = [ 
 
         
                var arrayJS=<?php echo json_encode($string);?>; 
  
    // Mostramos los valores del array 
 
    for(var i=0;i<arrayJS.length;i++) 
    { 
        document.write("<br>"+arrayJS[i]); 
    } 
/*            { 
                artista: "Circa Waves", 
                cancion: "Uno", 
                ruta: "uno.mp3" 
            }, 
            { 
                artista: "Circa Waves", 
                cancion: "Fire That Burns", 
                ruta: "http://umgukvirgin.edgesuite.net/D2C/circawaves/circawaves-firethatburns.mp3", 
                portada: "https://s-media-cache-ak0.pinimg.com/originals/51/95/70/5195701e847bc0a38f25f5721bce92f1.jpg" 
            }, 
            { 
                artista: "Circa Waves", 
                cancion: "Stuck", 
                ruta: "http://umgstore.edgesuite.net/D2C/circawaves/Stuck.mp3", 
                portada: "http://ksassets.timeincuk.net/wp/uploads/sites/55/2017/03/2017_CircaWaves_Press_080317.jpg" 
            }*/ 
        ]; 
         
        //Establecemos los elementos de portada, título, reproductor y contador 
        Reproductor.portrait = document.querySelector("#portrait"); 
        Reproductor.title = document.querySelector("#title"); 
        Reproductor.player = document.querySelector("#player"); 
        Reproductor.cuenta = 0; 
         
        //Se reproduce la primera canción 
        Reproductor.tocar(); 
    }, 
     
    tocar: function(){ 
        //Se establece la portada, artista y título y el archivo de audio 
        Reproductor.portrait.src = Reproductor.canciones[Reproductor.cuenta].portada; 
        Reproductor.title.innerHTML = Reproductor.canciones[Reproductor.cuenta].artista + " - " + Reproductor.canciones[Reproductor.cuenta].cancion; 
        Reproductor.player.src = Reproductor.canciones[Reproductor.cuenta].ruta; 
       
        //Se actualiza el contador 
        Reproductor.cuenta = Reproductor.cuenta == Reproductor.canciones.length - 1 ? 0 : ++Reproductor.cuenta; 
         
        //Se reproduce la canción 
        Reproductor.player.play(); 
       
        //Cuando acabe una canción, se reproduce la que sigue 
        Reproductor.player.addEventListener("ended", Reproductor.tocar); 
    } 
}; 
 
//Al cargar la página 
document.addEventListener("DOMContentLoaded", Reproductor.init); 
</script> 
</head> 
 
<body> 
    <img id="portrait" /> 
    <label id="title"></label> 
    <audio id="player" controls="controls" type="audio/mpeg"></audio> 
</body> 
</html>

gracias otra vez

fab2160225 · #15 (**permalink**) 05/06/2017, 07:36

lo he estado repasando pero aún no me funciona, sin embargo si pongo un alert en la línea de los archivos de audio la cadena es correcta

{ruta:"dos.mp3"},{ruta:"tres.mp3"},{ruta:"uno.mp3" }

Código PHP:

  <?php 
$directorio = "/wamp/www/audio"; 
 
if($gestor_dir = opendir($directorio)){ 
while (false !== ($entrada = readdir($gestor_dir))) { 
    if ($entrada != "." && $entrada != ".." && $entrada !=".php") 
    {$result[]= '{ruta:"'."$entrada".'"}';} 
     
} 
closedir($gestor_dir); 
} 
 
$string[] = implode(",", $result).""; //concateno el punto al final  
$resultado=$string; 
?> 
<html>  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>FdW - Reproductor de música</title> 
<style> 
img, label, audio{ 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 
 
img{ 
    width: 200%; 
} 
</style> 
<script type="text/javascript"> 
var arrayJS=<?php echo json_encode($string);?>; 
 /*   for(var i=0;i<arrayJS.length;i++) 
    { 
        //alert("hola") 
        var resA=document.write("<br>"+arrayJS[i]); 
    }*/ 
</script> 
<script type="text/javascript"> 
 
 
'use strict'; 
/** 
 * Reproductor de música 
 * 
 * @author Alexis88 
 */ 
 
var Reproductor = { 
    init: function(){ 
        //text-align: center; 
        //Arreglo de canciones con sus respectivos atributos 
        Reproductor.canciones = [ //alert(arrayJS)  el resultado es {ruta:"dos.mp3"},{ruta:"tres.mp3"},{ruta:"uno.mp3"} 
        arrayJS 
        ]; 
         
        //Establecemos los elementos de portada, título, reproductor y contador 
        Reproductor.portrait = document.querySelector("#portrait"); 
        Reproductor.title = document.querySelector("#title"); 
        Reproductor.player = document.querySelector("#player"); 
        Reproductor.cuenta = 0; 
         
        //Se reproduce la primera canción 
        Reproductor.tocar(); 
    }, 
     
    tocar: function(){ 
        //Se establece la portada, artista y título y el archivo de audio 
        Reproductor.portrait.src = Reproductor.canciones[Reproductor.cuenta].portada; 
        Reproductor.title.innerHTML = Reproductor.canciones[Reproductor.cuenta].artista + " - " + Reproductor.canciones[Reproductor.cuenta].cancion; 
        Reproductor.player.src = Reproductor.canciones[Reproductor.cuenta].ruta; 
       
        //Se actualiza el contador 
        Reproductor.cuenta = Reproductor.cuenta == Reproductor.canciones.length - 1 ? 0 : ++Reproductor.cuenta; 
         
        //Se reproduce la canción 
        Reproductor.player.play(); 
       
        //Cuando acabe una canción, se reproduce la que sigue 
        Reproductor.player.addEventListener("ended", Reproductor.tocar); 
    } 
}; 
 
//Al cargar la página 
document.addEventListener("DOMContentLoaded", Reproductor.init); 
</script> 
</head> 
 
<body> 
    <img id="portrait" /> 
    <label id="title"></label> 
    <audio id="player" controls="controls" type="audio/mpeg"></audio> 
</body> 
</html>

Alexis88 · #16 (**permalink**) 05/06/2017, 12:07

Usualmente, aunque con AJAX, lo hago de una forma similar a esta:

Código PHP:

Ver original$canciones = [
    ['titulo' => 'foo'], ['titulo' => 'bar'], ['titulo' => 'bin'], ['titulo' => 'baz']
];

Código Javascript:

Ver original//Adaptado a tu código
var canciones = <?php echo json_encode($canciones) ?>;

fab2160225 · #17 (**permalink**) 05/06/2017, 14:21

Buenas, si eso es justo lo que tengo

Cita:

Var arrayJS <?php echo json_encode($string);?>;

Y en

Cita:

Reproductor.canciones [ arrayJS];

Sin embargo esto no me devuelve nada, pero si le pongo

Cita:

Reproductor.canciones [ alert(arrayJS)];

Ahí me muestra la ruta correcta, es más si la pego en el lugar de la variable funciona
No sé qué es lo que no veo

Alexis88 · #18 (**permalink**) 05/06/2017, 14:57

Fíjate en la manera en la que elaboro el arreglo en PHP.

fab2160225 · #19 (**permalink**) 06/06/2017, 09:37

Buenas, hoy he estado liado con otros temas, me he puesto ahora y cuanto más lo miro menos veo, dame un empujón más a ver si despierto.
gracias

Alexis88 · #20 (**permalink**) 06/06/2017, 11:35

Te estás complicando con cosas simples.

Cuando comenté que te fijes en la manera en la que elaboro el arreglo en PHP, es básicamente por esto:

Código PHP:

Ver original//Tu forma
$result[]= "{ruta: $entrada}";
 
//Mi forma
$result[]= ['ruta' => $entrada];

¿Cuáles son los resultados?

Código HTML:

Ver originalTu forma:
["{titulo: 'foo'}", "{titulo: 'bar'}", "{titulo: 'bin'}", "{titulo: 'baz'}"]
 
Mi forma:
[{titulo: 'foo'}, {titulo: 'bar'}, {titulo: 'bin'}, {titulo: 'baz'}]

Tú estás obteniendo un arreglo de cadenas de caracteres, mientras que yo obtengo un arreglo de objetos que es precisamente lo que necesitas.

Por favor, fíjate bien en los ejemplos y explicaciones para no volver a lo mismo.

fab2160225 · #21 (**permalink**) 06/06/2017, 13:35

Si tienes razón, hay veces que me complicó con cosas simples, a ver si tengo algo de tiempo para verlo con calma, suelo ser buen alumno , pero aquí me estoy atascando, gracias por tu paciencia.