Estoy creando una pagina web para cursos de 50 minutos, pero, necesito que cuando un slider pasa al siguiente, el audio también pasa, eso ya lo tengo hecho, pero cuando un audio pasa, también se me reproduce el audio del siguiente slider, por lo tanto chocan y se escuchan los dos al mismo tiempo, me gustaría que se escuchara uno solo por index del slider, o que el slider solo pase cuando este se termine de reproducir. Adjunto codigo:
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(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) {
time = 10000;
myAudio = document.getElementById("myAudio");
document.getElementById("myAudio").play();
//Objeto con referencia a la etiqueta audio
}
if(index == 2) {
myAudio = document.getElementById("myAudio2");
document.getElementById("myAudio2").play();
document.getElementById("myAudio").currentTime = 0;
document.getElementById("myAudio").pause();
time = 20000;
//Objeto con referencia a la etiqueta audio
}
if(index == 3) {
time = 43000;
//Objeto con referencia a la etiqueta audio
myAudio = document.getElementById("myAudio3");
document.getElementById("myAudio3").play();
document.getElementById("myAudio4").currentTime = 0;
document.getElementById("myAudio2").pause();
}
El código html, es el siguiente:
<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>
Como ven, ya tengo una función para controlar los de los index y el audio, pero esta me falla o no funciona correctamente.
play
ypause
son métodos, luego faltan paréntesis (.play()
y.pause()
)