2

Estoy creando un reproductor de musica. Lo que pretendo es que cuando le de a un boton realice esa acción. He creado eventos que los relacione con determinada funcion depende a la accion que se pulse. Pero en mi caso me falta algo para que funcione... Esto es lo que tengo:

<script>

    myAudio = document.getElementById("myAudio");
    playAudio = document.getElementById("play");
    stopAudio = document.getElementById("stop");
    pausarAudio = document.getElementById("pause");

    //Añadiendo controles
    playAudio.addEventListener('click', playAudio, true);
    pausarAudio.addEventListener('click', pausar, true);
    stopAudio.addEventListener("click", stopAudio, true);


    function playAudio(){
        myAudio.load();
        myAudio.play();
    }
    function stopAudio(){
        myAudio.pause();
        myAudio.currentTime = 0; 
    }
    function pausar(){
        myAudio.pause();
    }
    </script>

    <audio id="myAudio" autoplay preload>
        <source src="Canciones/adictiva.mp3" type="audio/mp3">
    </audio>
    <!-- Reproductor MP3 -->
    <div class="mp3">
        <div class="screen">
            <p id="info-track">Adictiva</p>
        </div>
        <div class="controles">
            <button id="play">Play</button>
            <button id="pause">Pause</button>
            <button id="stop">Stop</button>
            <button id="primera">Primera</button>
            <button id="anterior">Anterior</button>
            <button id="siguiente">Siguiente</button>
            <button id="ultima">Ultima</button>
            <!-- Control para deslizar la barra de volumen y baja o subir volumen -->
            <button id="controlVolumen">Control de Volumen</button>
            <!-- Control para deslizar la barra para avanzar o retroceder la canción -->
            <button>Control deslizar</button>
            <button>Aleatorio</button>
        </div>
    </div>
6
  • ¿Porque usas el mismo nombre en tus funciones y en tus objetos? Podrías usar playBtn para tu objeto, es más legible. el 22 ene. 2019 a las 19:53
  • No se a que te refieres Mauricio pero si quieres ponerme un ejemplo de como lo harias tu .. estoy muy perdido con esto... el 22 ene. 2019 a las 20:00
  • 1
    En términos generales está bien. Excepto que yo cambiaría el nombre de mis objetos. Tu los tienes así: playAudio = document.getElementById("play"); y yo los colocaría así: playBtn = document.getElementById("play");. Esto es porque luego declaras tus funciones playAudio, pauseAudio, etc. Y los nombres ya han sido declarados para tus objetos. No se si captas lo que trato de decirte. No puedes usar el mismo nombre para tus objetos y para tus funciones. el 22 ene. 2019 a las 21:37
  • Si si te entiendo, he cambiado ya todos los nombres de mis objetos como bien has dicho, pero me sigue sin funcionar, es que no lo entiendo... tengo todos los metodos bien y hago correctamente la llamada a cada metodo cuando le doy click a un boton... el 23 ene. 2019 a las 10:19
  • 1
    Excelente. Publica tu solución como respuesta. Dando los detalles del problema y la solución al mismo. Asi ayudas a otros que tengan la misma situación. Saludos el 23 ene. 2019 a las 11:07

1 respuesta 1

3

Bien ya esta solucionado. Lo que pasaba es que el codigo javascript que esta situado en la etiqueta script debe ir al final del body del HTML. Y yo lo tenia por encima de los botones y la etiqueta audio por eso no funcionaba. Aparte de esto, mis objetos y mis funciones se llamaban igual. Lo he editado para que tenga un correcto funcionamiento. Asi ha quedado:

<div class="mp3">
        <div class="screen">
            <p id="info-track"></p>
        </div>
        <div class="controles">
            <button id="play">Play</button>
            <button id="pause">Pause</button>
            <button id="stop">Stop</button>
            <button id="primera">Primera</button>
            <button id="anterior">Anterior</button>
            <button id="siguiente">Siguiente</button>
            <button id="ultima">Ultima</button>
            <!-- Control para deslizar la barra de volumen y baja o subir volumen -->
            <button id="controlVolumen">Control de Volumen</button>
            <!-- Control para deslizar la barra para avanzar o retroceder la canción -->
            <button>Control deslizar</button>
            <button>Aleatorio</button>
        </div>
    </div>

    <script>
    //Objeto con referencia a la etiqueta audio     
    myAudio = document.getElementById("myAudio");
    //Objeto con referencia al boton play
    playBtn = document.getElementById("play");
    //Objeto con referencia al boton pause
    pauseBtn = document.getElementById("pause");
    //Objeto con referencia al boton stop
    stopBtn = document.getElementById("stop");


    //Añadiendo funcionalidad a los botones del reproductor
    playBtn.addEventListener("click", play, true);
    pauseBtn.addEventListener("click", pause, true);
    stopBtn.addEventListener("click", stop, true);
    console.log(myAudio.currentSrc);

    function play(){
        myAudio.play();
    }
    function stop(){
        myAudio.pause();
        myAudio.currentTime = 0; 
    }
    function pause(){
        myAudio.pause();
    }
    </script>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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