1

Me encuentro haciendo un reproductor de música como práctica, pero al llegar al boton de pausado me he quedado atorado ya que no consigo hacer que me pause la canción, he intentado ponerles a ambos iconos una clase diferente para poder ingresar a ellos y hacer el evento pero la verdad me da error y ya se me acabaron mis opciones, es por eso que recurro al foro para pedir orientación les dejo el código.

//Declaracion de variables
const iconHeart = document.getElementById("aside-heart");
const resize = document.getElementById("resize");
const back = document.getElementById("back");
const next = document.getElementById("next");
const play = document.getElementsByClassName("esfera-play")[0]


let index_cancion = 0;
let cancionActual = document.createElement("audio");
let estaReproduciendo = false;

let musica = [
  {
    nombre: "Bohemian Rhapsody",
    artista: "Queen",
    caratula: "",
    ruta: "/audio/Queen - Bohemian Rhapsody (Remastered 2011).mp3",
  },

  {
    nombre: "Don't Stop Me Now",
    artista: "Queen",
    caratula: "",
    ruta: "/audio/Queen - Don't Stop Me Now (Remastered 2011).mp3",
  },
];

function loadMusic() {
  cancionActual.src = musica[index_cancion].ruta;
  cancionActual.load();
}


function playSong() {
  play.addEventListener("click", (e) => {
    cancionActual.play();
    play.innerHTML=`<i class="fas fa-play play-icon"></i>`
  
  });
  

}

function songPause(){
  play.addEventListener("click", (e) => {
    play.innerHTML=` <i class="fas fa-pause icon-pause"></i>`
    cancionActual.pause()
    estaReproduciendo= false
  })
}



function nextSong() {
  next.addEventListener("click", (e) => {
    if (index_cancion < musica.length) {
      index_cancion = index_cancion + 1;
      loadMusic(index_cancion);
      cancionActual.play()
    } else {
      index_cancion = 0;
    } 
    
  });
}

function backSong() {
back.addEventListener("click", (e) => {
    if (index_cancion > 0) {
      index_cancion -= 1;
      loadMusic(index_cancion)
      cancionActual.play();
    } else {
      index_cancion = musica.length -1;
    }
   
  });
}


playSong(loadMusic());
nextSong();
backSong()
songPause()
*{
    margin:  0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --colorIcon:#AFB7C4;
    --colorIconReproductor:#4830A2;
    
     }
    

img{
    width: 100%;   
}



html{
    scroll-behavior: smooth;
    }


body{
    background:#E0E7EF;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    }


.reproductor-box{
    background: linear-gradient(145deg, #C9CED1, #FFFFFF);
    border-radius: 9px;
    box-shadow: 6.91px 6.91px 9px #E0E5E8, -6.91px -6.91px 9px #FAFFFF;
    width   : 260px;
    height  : 350px;
    padding-right: 15px;
    position: relative;
    }


.reproductor-box::before{
    border-radius: 6px;
    background-image: url("/img/Queen-Greatest_Hits_II-Frontal.jpg");
    background-size: cover;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    content : "" ;
    width   :  180px;
    height  :  180px;
    outline : 1px solid;
    position: absolute;
    top     : 20px;
    left    : -20px;
    animation-name: rotar;
    animation-duration: 5s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
   
    } 

@keyframes rotar{
  0%{
      transform: rotateY(90deg);
      
     
  }

  100%{
    transform: rotateY(360deg);
  }


}


.aside{
    width :   70px;
    height:   270px;
    float : right; 
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    
    }


.aside .aside-icon{
    width: 20px;
    color: var(--colorIcon);
    margin-top: 20px
    
}

.aside .back{
        font-size: 15px;
        position:relative;
        padding:5px ;       
}

.aside .back::after{
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    background-color: var(--colorIcon);
    width: 3px;
    height: 13px;
    border-radius: 10px;    
}

.aside .esfera{
    margin-top: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    background-color:#FFFF; 
    border-radius: 50%;
    height:40px;
    width: 40px; 
    padding: 7px 12px;
    color: #4830A2;
    position:relative;
   
}

.aside .esfera::before{
    content: "";
    position: absolute;
    right: 10px;
    bottom: 13px;
    background-color: var(--colorIconReproductor);
    width: 3px;
    height: 13px;
    border-radius: 10px;   
}



.aside .esfera-play{
    border: 4px solid white;
    margin-top: 8px;
    background-color: #eeedf2;
    width: 50px;
    height: 50px;
    border-radius: 50%;

}

.aside .icon-pause{
    color: white;
    font-size: 20px;
    padding: 12px;
}

.aside .play-icon{
    padding: 12px 14px;
    font-size: 20px;
    color: white;
    
  
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Reproductor de música </title>
    
    <!--Meta-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!--CSS-->
    <link rel="stylesheet" href="css/style.css">
    
    <!--Bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
    
    <!--Font Awesome-->
    <script src="https://kit.fontawesome.com/1bbadd233d.js" crossorigin="anonymous"></script>
    
</head>


<body class=" container-fluid " >
     <div class="reproductor-box">
         <div class="aside">
            <img src=" img/corazon-rojo.png " class="aside-icon" id="aside-heart" alt="icono corazón rojo">
            <i class="fas fa-external-link-alt    aside-icon   resize  " id="resize"></i>
            <i class="fas fa-arrow-left           aside-icon   back " id="back"></i>
            <div class="esfera"><i class="fas fa-arrow-right " id="next"></i></div>   
             <div class="esfera-play">
              
                    <i class="fas fa-pause icon-pause"></i>
                   
            
            </div>   
           
            
         </div>
         
     </div>
     <script src="index.js"></script>
</body>
</html>

Creo que podría poner un botón extra de pause pero yo quiero hacerlo así, que se vayan alternando los iconos.

he tratado de ponerles una clase distinta pero no me deja me da error.


1 respuesta 1

1

Podrías usar una única función y comprobar el estado del audio para elegir qué hacer:

play.addEventListener("click", (e) => {
  if (cancionActual.paused) {
    cancionActual.play();
    play.innerHTML=`<i class="fas fa-play play-icon"></i>`
  } else {
    cancionActual.pause()
    play.innerHTML=` <i class="fas fa-pause icon-pause"></i>`
  }
});
2
  • He intentado hacerlo de esa manera, solo que usted me dice que lo condicione con play.paused y eso a mi me genera un error en la consola dice que no es una función entonces he estado tratando de condicionar con el estado de la canción si esta en true o false pero solo me toma el true y no me hace nada. Commented el 31 ene. 2022 a las 22:49
  • Tenía una errata en el código, paused es una propiedad del elemento audio, no del botón Commented el 31 ene. 2022 a las 23:13

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.