0

Tengo este JS que realiza perfectamente su función, reproduce un audio detrás de otro aleatoriamente, para retrasar el intervalo cada 10 mins, le aplico setInterval(function(){cargarJingle(aleatorios())}, 600000); Me encuentro con un efecto no deseado que no sé solucionar, cuando se presiona PLAY se reproduce un audio de la lista, lo que deseo es que se retrase 10 min. en la primera reproducción y luego continúe reproduciendo los demás cada 10 min. Lo he intentado aplicándole setInterval(function(){reproductorJingles.play()}, 600000); pero se solapa la reproducción. Alguna ayuda ó idea???. Agradecido de antemano.

var reproductorJingles = document.getElementById("jingle");
function cargarJingle(numeroJingle){

    // Carga el jingle de forma dinámica
    var source = reproductorJingles;
    source.src = listaJingles[numeroJingle][0];

    reproductorJingles.load();
    // reproductorJingles.play();
    setInterval(function(){reproductorJingles.play()}, 600000);

    var tituloJingle = document.getElementById("tituloJingle");
    tituloJingle.innerHTML = listaJingles[numeroJingle][1];
}

function aleatorios(){
    return Math.round(Math.random() * (listaJingles.length - 1));
}
// Inicio listado

var lista = [["http://www.sonidosmp3gratis.com/sounds/008576979_prev.mp3", "TEST UNO"],
            ["http://www.sonidosmp3gratis.com/sounds/short-circuit.mp3", "TEST DOS"],
            ["http://www.sonidosmp3gratis.com/sounds/whistle-campana-whatsapp.mp3", "TEST TRES"],
            ["http://www.sonidosmp3gratis.com/sounds/mario-bros%20vida.mp3", "TEST CUATRO"],
            ["http://www.sonidosmp3gratis.com/sounds/messenger-tono-mensaje-.mp3", "TEST CINCO"]];

// Fin listado

let listadoJingles = document.getElementById("listadoJingles");
for (let x of listaJingles){
    let item = document.createElement("li");
    item.innerHTML = x[1];
    listadoJingles.appendChild(item);
}

reproductorJingles.addEventListener("ended", function(){
    setInterval(function(){cargarJingle(aleatorios())}, 600000);  // Intervalo de reprodución, 10 mins.
});
<audio id="jingle"></audio>
<ul id="listadoJingles"></ul>
<button id="play" onclick="cargarJingle(aleatorios());">Play</button>

1 respuesta 1

2

He cambiando un poco tu código, no solo para organizarlo si no para que tenga la funcionalidad que necesitas:

var reproductorJingles = document.getElementById("jingle");
let listadoJingles = document.getElementById("listadoJingles");
var tituloJingle = document.getElementById("tituloJingle");
let controlledInterval;
// Inicio listado
var listaJingles = [
  ["https://b.ppy.sh/preview/461744.mp3", "Yomi yori kikoyu"],
  ["https://b.ppy.sh/preview/601896.mp3","Mischievous Masquerade"],
  ["https://b.ppy.sh/preview/396221.mp3","Galaxy Collapse"],
  ["https://b.ppy.sh/preview/40344.mp3", "Atama no taisou"],
  ["https://b.ppy.sh/preview/861946.mp3", "Tsukiyo no ongakui"],
  ["https://b.ppy.sh/preview/723615.mp3", "Ourovoros"],
  ["https://b.ppy.sh/preview/911255.mp3", "Chou jou genki show"],
  ["https://b.ppy.sh/preview/24313.mp3", "Can't defeat airman"]
];
// Fin listado

for (let x of listaJingles) {
  let item = document.createElement("li");
  item.textContent = x[1];
  listadoJingles.appendChild(item);
}

function aleatorios() {
  return Math.round(Math.random() * (listaJingles.length - 1));
}

function cargarJingle(numeroJingle, ev) {

  // Carga el jingle de forma dinámica
  reproductorJingles.src = listaJingles[numeroJingle][0];
  reproductorJingles.load();
  
  if(controlledInterval){clearInterval(controlledInterval)}
  controlledInterval = setInterval(()=>{reproductorJingles.play()}, 5000);
  
  tituloJingle.innerHTML = listaJingles[numeroJingle][1];
}

reproductorJingles.addEventListener("ended", ev => cargarJingle(aleatorios()));
<h1 id="tituloJingle"></h1>
<audio id="jingle"></audio>
<ul id="listadoJingles"></ul>
<button id="play" onclick="cargarJingle(aleatorios());">Play</button>

OJO: según lo que me dices requieres que una vez le das al boton play la primera canción se reproduzca 10 minutos después de que le haz undido el click al botón de reproducir(Eso es lo que entendí), por otro lado, que después de que halla terminado la canción, espere 10 minutos mas y automáticamente cambie a otra, y así con todas, el código para que lo pruebes he modificado este intervalo a 5 segundos, si lo deseas cambia el numero 5000 por el equivalente a 10 minutos en milisegundos.

por otra parte lo que hago de relevante en el código es lo siguiente:

//Creo una variable llamada controlledInterval y no la inicializo
let controlledInterval;

esta será usada luego para "apuntar" de alguna forma a una función que sería anónima si no es guardada en una variable. Especificamente se usa en la función cargarJingle():

/*comprobamos primero si existe algún intervalo, si no, no limpiaremos 
 *ningún intervalo ya que aún no existe uno almacenado
 *en la variable controlled interval, luego simplemente guardamos un
 *setInterval en la variable controlledInterval.
 *
 *de esta manera, "reseteamos" primero el intervalo para que no acumule 
 *tiempo que no deseamos (Si hay uno) y luego le volvemos a poner otro 
 *(Para que efectivamente se reproduzca otro audio)
 *al "resetear" el intervalo la canción se detiene. y pone otra en el 
 *lapso de tiempo que estableciste.*/

 if(controlledInterval){clearInterval(controlledInterval)}
 controlledInterval = setInterval(()=>{reproductorJingles.play()},
2
  • Maravillosamente perfecto!!! Además te felicito por la explicación tan clara y comprensible para los que estamos aprendiendo. Agradecido por tu tiempo dedicado. Commented el 8 may. 2019 a las 15:18
  • Un placer ayudarte ;)
    – Layer
    Commented el 8 may. 2019 a las 20:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.