1

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>

2 respuestas 2

2

Las etiquetas audio emiten un evento cuando han finalizado la reproducción.

Solo tienes que escucharlo:

document.getElementById("myAudio").onended = () => {
    // Reproducir siguiente elemento...
}

Por lo tanto, para hacer ese botón que dices sería algo parecido a esto:

const audio1 = document.getElementById('aud1');
const nextBtn = document.getElementById('next');

audio1.onended = () => {
    nextBtn.style.display = 'block';
}
#aud1 {
    display: none;
}
<audio id="aud1" controls>
    <source src="">
</audio>
<button id="next">Siguiente</button>

Entiende que no puedo incrustar ninguna fuente de audio, así que el evento (al parecer) se lanza en el mismo momento en que se ha cargado el elemento de audio.

3
  • Muy buena lógica bro, muchas gracias, no conocía la función onended Commented el 26 jun. 2021 a las 15:09
  • Buenas, Marcos, hace días de tu respuesta, pero, como podría hacer que el audio cambie de valor según el if? Commented el 29 jun. 2021 a las 14:33
  • @AlexanderCoronado a qué te refieres con valor? Commented el 29 jun. 2021 a las 20:44
0

Si conoces la duración del audio, que tal si animas con css el botón desde 0% {visibility : hidden } hasta 100% {visibility: visible} ?

Si el audio es de duración random es otro tema

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.