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.