I have this JS that performs its function perfectly, it plays one audio after another randomly, to delay the interval every 10 mins, I apply setInterval(function(){loadJingle(random())}, 600000); I come across an unwanted effect that I don't know how to solve, when PLAY is pressed an audio from the list is played, what I want is for it to be delayed by 10 min. on the first playback and then continue playing the others every 10 min. I have tried it by applying setInterval(function(){reproducorJingles.play()}, 600000); but the reproduction overlaps. Any help or idea??? Thanks in advance.
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>
I've changed your code a bit, not only to organize it but to have the functionality you need:
BEWARE : according to what you tell me, once you hit the play button, the first song plays 10 minutes after you click the play button (that's what I understood), on the other hand, that after that the song is finished, wait 10 more minutes and automatically change to another, and so with all, the code for you to try it I have modified this interval to 5 seconds, if you wish, change the number 5000 for the equivalent of 10 minutes in milliseconds .
On the other hand, what I do relevant in the code is the following:
this will then be used to "point" in some way to a function that would be anonymous if not stored in a variable. Specifically, it is used in the loadJingle() function: