Я пытаюсь создать аудиоплеер, который отображает название песни, имя исполнителя и обложку песни. У меня есть 32 песни для добавления в этот музыкальный проигрыватель, поэтому я также пытаюсь добавить следующую / предыдущую кнопку и заставить кнопку воспроизведения переключиться на кнопку паузы во время воспроизведения песни.
Я новичок в javascript, так чтоЯ понятия не имею, как это сделать без использования Jquery или библиотеки. спасибо за помощь.
вот ссылка на мой код.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
background-image: linear-gradient(to top, #a18cd18a 0%, #fbc2eb88 100%);
background-repeat: no-repeat;
background-size: contain;
}
.top {
width: 100%;
height: 3em;
margin-bottom: 5em;
display: grid;
grid-template-columns: 1fr auto;
}
.player {
display: grid;
grid-template-columns: auto auto 1fr;
grid-gap: 0.75em;
}
.player>div {
align-self: center;
}
.songCover {
justify-self: right;
height: 50px;
width: 50px;
/*transform: translate(-50%, -50%);*/
}
.songCover>img {
width: 50px;
height: auto;
}
.about {
height: 50px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.songTitle {
width: 125px;
font-family: sans-serif;
font-weight: normal;
font-size: 20px;
letter-spacing: 0.02em;
color: #c80028;
/*transform: translate(-50%, -50%);*/
}
.Artist {
width: 125px;
font-family: sans-serif;
font-weight: normal;
font-size: 14px;
letter-spacing: 0.025em;
color: #c80028;
align-self: end;
/*transform: translate(-50%, -50%);*/
}
.playerButtons {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
justify-items: center;
max-width: 275px;
/*transform: translate(-50%, -50%);*/
}
button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
all: unset;
}
.play,
.prevSong,
.nextSong,
.pause {
cursor: pointer;
}
.pause {
display: none;
cursor: pointer;
}
<header class="top">
<div class="player">
<div class="songCover">
<img src="http://static1.squarespace.com/static/56454c01e4b0177ad4141742/56f3eeaa6e06f2df013dd6cd/56f3ef166e06f2df013de90e/1458827030471/Im-Gonna-Be-500-Miles-Cover.jpg?format=original" alt="song Cover" />
</div>
<div class="about">
<div class="songTitle">Song Name</div>
<div class="Artist">Artist name here</div>
</div>
<div class="playerButtons">
<button class="prevSong">
<img src="http://cdn.onlinewebfonts.com/svg/img_68793.png" alt="previous" height="15px" />
</button>
<button class="play">
<img src="http://www.lynnettechadwick.com/wp-content/uploads/2015/04/play-button.png" alt="play" height="20px" />
</button>
<button class="pause">
<img src="https://banner2.kisspng.com/20180412/qle/kisspng-computer-icons-linkedin-desktop-wallpaper-pause-button-5acf7aca975286.4627736315235468266198.jpg" alt="pause" height="20px" />
</button>
<button class="nextSong">
<img src="http://cdn.onlinewebfonts.com/svg/img_60041.png" alt="next" height="15px" />
</button>
</div>
</div>
</header>