HTML CODE(index.html)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<link
rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css”
integrity=”sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==”
crossorigin=”anonymous”
referrerpolicy=”no-referrer”
/>
<link rel=”stylesheet” href=”./styles.css” />
<title>Music Player</title>
</head>
<body>
<section>
<header>
<img
src=”https://cdn.britannica.com/03/151903-131-E310E9EC/Microphone-background-sound-waves-energy-Music.jpg”
alt=”playing-cover”
/>
<h3>Track Name</h3>
<p>Track desc</p>
</header>
<label>Playlist</label>
<ul></ul>
<footer>
<div class=”slider”>
<div class=”slider-progress”>
<div class=”slider-pin”></div>
</div>
</div>
<div class=”count”>
<span class=”count-current”>00:01</span>
<span class=”count-final”>11:23</span>
</div>
<div class=”event”>
<i class=”fas fa-caret-left event-prev”></i>
<i class=”fas fa-play event-playPause”></i>
<i class=”fas fa-caret-right event-next”></i>
<i class=”fas fa-volume-up event-muteUnmute”></i>
</div>
</footer>
</section>
<audio src=”” id=”audio”></audio>
<script src=”./script.js”></script>
</body>
</html>
CSS CODE(styles.css)
@import url(‘https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap’);
*,
*::after,
*::before {
margin: 0;
box-sizing: border-box;
}
body {
font-family: ‘Fira Sans’, sans-serif;
background-color: #171717;
}
section {
max-width: 576px;
margin: 0 auto;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
text-align: center;
margin: 2rem 0 0 0;
}
header img {
width: 150px;
height: 150px;
border-radius: 50%;
}
header h3 {
color: #fff;
margin: 15px 0 3px 0;
}
header p {
color: crimson;
}
label {
color: #fff;
border-bottom: 4px solid crimson;
margin-left: 2rem;
width: fit-content;
padding: 0 0.5rem;
margin-top: 3rem;
display: block;
}
ul {
background-color: #131313;
flex: 1;
overflow-y: auto;
padding: 1.5rem 0.5rem 0 0.5rem;
}
ul li {
display: flex;
align-items: center;
border-bottom: 1px solid #a8a8a8;
margin-bottom: 15px;
padding-bottom: 0.5rem;
}
.track-img {
width: 50px;
height: 50px;
margin-right: 10px;
}
.track-number {
color: #a8a8a8;
margin-right: 10px;
}
.track-detail_name {
color: #fff;
}
.track-detail_desc {
color: #a8a8a8;
}
footer {
background-color: #030303;
padding: 0 0.5rem 0.5rem 0.5rem;
}
.slider {
background-color: darken(white, 50%);
border-radius: 2px;
cursor: pointer;
height: 2px;
position: relative;
width: 100%;
}
.slider-progress {
background-color: crimson;
height: 100%;
pointer-events: none;
position: absolute;
width: 0%;
}
.slider-pin {
background-color: white;
border-radius: 8px;
height: 8px;
position: absolute;
pointer-events: all;
right: -5px;
top: -2px;
width: 8px;
box-shadow: (0px 1px 1px 0px rgba(0, 0, 0, 0.32));
transition: (transform 0.25s ease);
}
.count {
color: #585858;
display: flex;
justify-content: space-between;
font-size: 0.8rem;
margin: 3px 0 1rem 0;
font-weight: bold;
}
.event {
color: #585858;
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 0.5rem;
}
JAVASCRIPT CODE (script.js)
document.addEventListener(‘DOMContentLoaded’, function () {
const tracksList = [
{
audioSrc: ‘internship/tracks/song1.mp3’,
coverSrc: ‘internship/images/image1.jpg’,
name: ‘Bewajah(sanam teri kasam)’,
desc: ‘Himesh Reshammiya’,
id: 0,
},
{
audioSrc: ‘internship/tracks/song2.mp3’,
coverSrc: ‘internship/images/image2.jpg’,
name: ‘Kaise Hua(Kabhir Singh)’,
desc: ‘Vishal Mishra’,
id: 1,
},
{
audioSrc: ‘internship/tracks/song3.mp3’,
coverSrc: ‘internship/images/image3.jpg’,
name: ‘Duniya(Luka chuppi)’,
desc: ‘Akhil,Dhavni Bhanushali’,
id: 2,
},
{
audioSrc: “internship/tracks/song4.mp3”,
coverSrc: ‘internship/images/image4.jpg’,
name: ‘Apna Bana le(Bhediya)’,
desc: “Arjit singh”,
id: 3,
},
{
audioSrc: ‘internship/tracks/song5.mp3’,
coverSrc: ‘internship/images/image5.jpg’,
name: ‘Samjhawan(Humpty Sharma Ki Dulhania)’,
desc: ‘Arjit singh,Shreya Ghosal’,
id: 4,
},
{
audioSrc: ‘internship/tracks/song6.mp3’,
coverSrc: ‘internship/images/image6.jpg’,
name: ‘Photo(Luka chuppi)’,
desc: ‘Karan Sehmbi’,
id: 5,
},
];
const currentTrackName = document.querySelector(‘header h3’);
const currentTrackDesc = document.querySelector(‘header p’);
const currentTrackCover = document.querySelector(‘header img’);
const currentTrackAudio = document.querySelector(‘audio’);
const playPauseBtn = document.querySelector(‘.event-playPause’);
const muteUnmuteBtn = document.querySelector(‘.event-muteUnmute’);
const playNextBtn = document.querySelector(‘.event-next’);
const playPrevBtn = document.querySelector(‘.event-prev’);
const progress = document.querySelector(‘.slider-progress’);
const currentTrackTime = document.querySelector(‘.count-current’);
const finalTrackTime = document.querySelector(‘.count-final’);
// ADD TRACKS TO MY PLAYLIST ON PAGE LOAD
(function addMyTracksList() {
for (let track of tracksList) {
var li = document.createElement(‘li’);
li.id = track.id;
li.innerHTML = `
<div class=”track-number”>0${track.id}</div>
<img
src=${track.coverSrc}
class=”track-img”
alt=””
/>
<div class=”track-detail”>
<div class=”track-detail_name”>${track.name}</div>
<div class=”track-detail_desc”>
<small>${track.desc}</small>
</div>
</div>
`;
document.querySelector(‘ul’).appendChild(li);
(function (id) {
li.addEventListener(
‘click’,
() => {
playSelectedTrack(id);
},
false
);
})(track.id);
}
})();
let trackId = 0;
const loadTrack = (songId) => {
const song = tracksList.find((track) => track.id === songId);
const { audioSrc, coverSrc, name, desc } = song;
currentTrackName.innerText = name;
currentTrackDesc.innerText = desc;
currentTrackAudio.src = audioSrc;
currentTrackCover.src = coverSrc;
};
const playSelectedTrack = (songId) => {
trackId = songId;
loadTrack(songId);
playTrack();
};
loadTrack(trackId);
const playTrack = () => {
playPauseBtn.classList.remove(‘fa-play’);
playPauseBtn.classList.add(‘fa-pause’);
currentTrackAudio.play();
};
const pauseTrack = () => {
playPauseBtn.classList.remove(‘fa-pause’);
playPauseBtn.classList.add(‘fa-play’);
currentTrackAudio.pause();
};
const playPrevTrack = () => {
trackId–;
if (trackId < 0) {
trackId = tracksList.length – 1;
}
loadTrack(trackId);
playTrack();
};
const playNextTrack = () => {
trackId++;
if (trackId > tracksList.length – 1) {
trackId = 0;
}
loadTrack(trackId);
playTrack();
};
const updateProgress = () => {
const currentTime = currentTrackAudio.currentTime;
const trackDuration = currentTrackAudio.duration;
const percent = (currentTime / trackDuration) * 100;
progress.style.width = percent + ‘%’;
let curMins = Math.floor(currentTime / 60);
let curSecs = Math.floor(currentTime – curMins * 60);
let durMins = Math.floor(trackDuration / 60) || ‘–‘;
let durSecs = Math.floor(trackDuration – durMins * 60) || ‘–‘;
if (curMins < 10) {
curMins = `0${curMins}`;
}
if (curSecs < 10) {
curSecs = `0${curSecs}`;
}
if (durMins < 10) {
durMins = `0${durMins}`;
}
if (durSecs < 10) {
durSecs = `0${durSecs}`;
}
currentTrackTime.innerText = `${curMins}:${curSecs}`;
finalTrackTime.innerText = `${durMins}:${durSecs}`;
};
const muteUnmuteTrack = () => {
if (currentTrackAudio.muted) {
currentTrackAudio.muted = false;
muteUnmuteBtn.classList.remove(‘fa-volume-mute’);
muteUnmuteBtn.classList.add(‘fa-volume-up’);
} else {
currentTrackAudio.muted = true;
muteUnmuteBtn.classList.remove(‘fa-volume-up’);
muteUnmuteBtn.classList.add(‘fa-volume-mute’);
}
};
playPauseBtn.addEventListener(‘click’, () => {
const currentlyPlaying = playPauseBtn.classList.contains(‘fa-pause’);
currentlyPlaying ? pauseTrack() : playTrack();
});
muteUnmuteBtn.addEventListener(‘click’, () => muteUnmuteTrack());
playPrevBtn.addEventListener(‘click’, () => playPrevTrack());
playNextBtn.addEventListener(‘click’, () => playNextTrack());
currentTrackAudio.addEventListener(‘timeupdate’, () => updateProgress());
});