Actualmente he estado socializando mucho por aquí, tratando de resolver algunos problemitas con mi código, anteriormente, tenia la función de que cuando un audio acabara, pasara el slider y se reprodujera el siguiente, peor al parecer, esto trae muchísimos problemas, por lo que he decidido optar por que cuando el audio termine, aparezca un botón, así confirmo que la persona que este tomando mi curso, no lo dejara reproducir simplemente automáticamente. Me parece una buena idea, pero me he quedado corto a la hora de implementar esto, me gustaría que me pudieran asistir respecto a eso.
les adjuntare mi código JS y parte de mi slider en HTML:
function sliderTimeout(index) {
// Establecer índice actual
owl.currentIndex = index;
// Eliminar temporizador actual
clearTimeout(owlTimer);
// Obtener elemento actual por índice, jQuery inicia con cero, por eso el -1
// Solo si no es el último elemento
if(myAudio && typeof myAudio.pause == 'function') {
myAudio.pause();
}
if(index < imgItems) {
// Definir tiempo por defecto para todos los elementos
let time = 000;
// Aquí puedes analizar el contenido del elemento actual
// Para elegir audio y duración, cambiando el tiempo de espera
// Por ejemplo: dar el doble de tiempo para el segundo elemento
if(index == 1) {
myAudio.play();
time = 10000;
//Objeto con referencia a la etiqueta audio
myAudio = document.getElementById("myAudio");
document.getElementById("myAudio2").pause();
document.getElementById("myAudio").play();
document.getElementById("myAudio2").currentTime = 0;
}
if(index == 2) {
myAudio = document.getElementById("myAudio2");
document.getElementById("myAudio").currentTime = 0;
document.getElementById("myAudio").pause();
myAudio.play();
document.getElementById("myAudio3").currentTime = 0;
document.getElementById("myAudio3").pause();
time = 20000;
//Objeto con referencia a la etiqueta audio
}
if(index == 3) {
myAudio.play();
time = 43000;
//Objeto con referencia a la etiqueta audio
myAudio = document.getElementById("myAudio3");
document.getElementById("myAudio2").currentTime = 0;
document.getElementById("myAudio2").pause();
document.getElementById("myAudio4").currentTime = 0;
document.getElementById("myAudio4").pause();
}
if(index == 4) {
time = 2000;
//Objeto con referencia a la etiqueta audio \
myAudio = document.getElementById("myAudio4");
document.getElementById("myAudio4").play;
document.getElementById("myAudio5").currentTime = 0;
document.getElementById("myAudio5").pause();
document.getElementById("myAudio3").currenTime = 0;
document.getElementById("myAudio3").pause();
}
if(index == 5) {
time = 15000;
//Objeto con referencia a la etiqueta audio
myAudio = document.getElementById("myAudio5");
document.getElementById("myAudio6").currentTime = 0;
document.getElementById("myAudio4").pause = 0;
}
owlTimer = setTimeout(function() {
owl.trigger('next.owl.carousel');
}, time);
} else {
// Es el último elemento, puede tener tiempo diferente
setTimeout(function() {
// Probablemente quieras usar otra función para terminar
// Tal vez redirigir a otra página
}, 7000);
}
}
HTML:
<div class="slider">
<div class="owl-carousel">
<div class ="item">
<img src="imgs/1.png"/>
<div class="captionplay">
</div>
</div>
<div class ="item">
<img src="img/1.png"/>
<audio id="myAudio" autoplay="autoplay" preload="auto">
<source src="audios/audio1.mp3" type="audio/mp3" >
Your browser does not support the video tag.
</audio>
<div class="captionplay2">PREVENCIÓN DE ACOSO SEXUAL PARA EMPLEADOS</div>
<div class="captionplay3">Lineamientos para prevenir espacios de trabajo libres de violencia</div>
<span>1 of 100 </span>
</div>
<div class ="item">
<img src="img/9.png"/>
<div class="captionaudio"><h1>Audio</h1>
<audio id="myAudio2" autoplay="autoplay" preload="auto">
<source src="audios/audio2.mp3" type="audio/mp3" >
Your browser does not support the video tag.
</audio>
<ul style="list-style-image:url(img/flecha-correcta.png);">
<p><li>Este entrenamiento tiene audio, incluyendo un narrador y actores de voz.</li></p>
<p><li>No podra ir a la siguiente pantalla hasta que termine su narracion actual.</li></p>
</ul>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<span>2 of 100 </span>
</div>