1

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.

4
  • Tienes bastantes erratas en el código: play y pause son métodos, luego faltan paréntesis (.play() y .pause()) el 25 jun. 2021 a las 13:55
  • Si, tiene razón, había subido un código actualizado, actualmente están con los paréntesis. el 25 jun. 2021 a las 15:13
  • podrías editar y arreglar esas erratas, para comprobar el resto del código el 25 jun. 2021 a las 15:24
  • Perfecto, ya lo hice el 25 jun. 2021 a las 15:27

1 respuesta 1

1

Tienes una sola variable como referencia para el audio activo y puedes usarla para detener o pausar la reproducción antes de ir al siguiente elemento del slider.

Puedes agregar el evento ended al audio para saber cuando terminó la reproducción y avanzar al siguiente slider:

// Función para controlar avance de carousel
function sliderTimeout(index) {
    // Establecer índice actual
    owl.currentIndex = index;
    // Eliminar temporizador actual
    clearTimeout(owlTimer);

    // Analizar si la variable está asignada para pausar
    if(myAudio && typeof myAudio.pause == 'function') {
        // Detener el audio activo, no van a sonar dos o más al mismo tiempo
        myAudio.pause();
        // Eliminar evento de audio
        myAudio.removeEventListener('ended', audioEnd);
    }
    // Eliminar objeto de audio y asignar posteriormente, si lo hay
    myAudio = null;

    if(index < imgItems) {
        // Definir tiempo por defecto para todos los elementos
        let time = 1000;
        // Buscar audio por ID
        let id = 'myAudio';
        // Si el índice no es 1, agregarlo a ID
        if(index != 1) {
            id += index;
        }
        // Buscar audio por ID, si no existe, devuelve null
        myAudio = document.getElementById(id);
        // Si se encontró el audio, iniciar reproducción
        if(myAudio) {
            myAudio.currentTime = 0;
            myAudio.play();
            // Asignar índice, para saber qué hacer en la función
            myAudio.data.index = index;
            // Asignar evento
            myAudio.addEventListener('ended', audioEnd);
        } else if(index < imgItems - 1) {
            // Todavía no se ha llegado al final del carousel
            // No hay audio, pero sí debe haber avance automático
            owlTimer = setTimeout(sliderTimeout, time, index + 1);
        }
    }
}

// Función a ejecutar cuando termine el audio
function audioEnd(e) {
    // El audio terminó, se debe avanzar al siguiente slider
    // Tomar índice desde la variable y sumar 1
    let next = myAudio.data.index + 1;
    // Avanzar, la validación de índice se hace en la función
    sliderTimeout(next);
}

Seguramente ya no vas a necesitar la variable time cuando el elemento del slider contiene audio, porque el avance se va a hacer automático cuando termine la reproducción.

Edición: Todos los audios (al menos los que muestras en el código) tienen casi el mismo ID, variando solo el número, que no aparece en el primero. Con base en eso, se eliminan todos los condicionales. Se intenta acceder por ID + índice, si existe, se activa, de lo contrario se aplica temporizador para avanzar al siguiente elemento.

7
  • Muchas gracias! me ha funcionado el código, pero aun tengo que adaptarlo para una funcionalidad que no mostre en el codigo, es para pasar automaticamente, es esta: ` 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);` el 25 jun. 2021 a las 15:23
  • Triby, me gustaría saber si se puede implementar una función para hacer que el timer sea el mismo tiempo que el audio, me explico, cuando el audio termine, también el timer, o que detecte cuando no esta reproduciendo audio para así pasar el slider. Perdona si molesto. el 25 jun. 2021 a las 15:28
  • Cuando presiono el botón de play, reinicia el audio, si quieres, formulo otra pregunta y te muestro todo el código js del slider, así le das un mejor vistazo. el 25 jun. 2021 a las 15:57
  • Perfecto, Triby. Acabo de hacer una nueva pregunta, ahi deje todo el código del slider en JS. el 25 jun. 2021 a las 17:09
  • Tu código me parece excelente, la verdad, pero resulta que me da error al intentar acoplarlo a mi java script, seguiré intentando y te dejo saber que paso. el 25 jun. 2021 a las 18:40

Tu Respuesta

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

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