Skip to content

Commit 011cf3c

Browse files
nirajxdevnirajxdev
committed
added
1 parent c584f46 commit 011cf3c

File tree

2 files changed

+91
-65
lines changed

2 files changed

+91
-65
lines changed

‎11_muic-player-clone/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div id="details" class="flex flex-col items-center">
1414
<div id="now-playing" class="text-xs uppercase text-gray-500 mb-2">Playing Now</div>
1515
<div id="track-art" class="w-48 h-48 bg-gray-200 rounded mb-4 flex items-center justify-center text-gray-400">
16-
<span>Album Art</span>
16+
<span></span>
1717
</div>
1818
<div id="track-name" class="font-bold text-lg">Track Name</div>
1919
<div id="track-artist" class="text-sm text-gray-600">Artist Name</div>

‎11_muic-player-clone/script.js‎

Lines changed: 90 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1-
let nowPlaying = document.getElementById('now-playing');
2-
let trackArt = document.getElementById('track-art');
3-
let trackName = document.getElementById('track-name');
4-
let trackArtist = document.getElementById('track-artist');
1+
// Use unique names for elements vs functions
2+
const trackArt = document.getElementById('track-art');
3+
const trackName = document.getElementById('track-name');
4+
const trackArtist = document.getElementById('track-artist');
5+
const nowPlaying = document.getElementById('now-playing');
56

6-
let prevBtn = document.getElementById('prev-btn');
7-
let playPauseBtn = document. getElementById('play-pause-btn');
8-
let nextBtn = document.getElementById('next-btn');
7+
const playPauseBtn = document.getElementById('play-pause-btn');
8+
const nextBtnElement = document.getElementById('next-btn');
9+
const prevBtnElement = document.getElementById('prev-btn');
910

10-
let timeDuration = document.getElementById('time-duration');
11-
let currentTime = DocumentFragment.getElementById('current-time');
12-
let totalTime = DocumentFragment.getElementById('total-time');
13-
14-
let volumeSlider = document.getElementById('volume-slider');
11+
const seekSlider = document.getElementById('seek-slider');
12+
const volumeSlider = document.getElementById('volume-slider');
13+
const currTimeDisplay = document.getElementById('current-time');
14+
const totalTimeDisplay = document.getElementById('total-time');
1515

1616
let trackIndex = 0;
1717
let isPlaying = false;
1818
let updateTimer;
19-
2019
let curr_track = document.createElement('audio');
21-
let track_list = [
20+
21+
22+
const track_list = [
2223
{
2324
name: "Night Owl",
2425
artist: "Broke For Free",
@@ -27,91 +28,116 @@ let track_list = [
2728
},
2829
{
2930
name: "Random Owl",
30-
artist: "Broke For Free",
31-
image: "Image URL",
31+
artist: "Random For Free",
32+
image: "./image.png",
3233
path: "./music/sample-6s.mp3"
3334
},
34-
{
35-
name: "MidNight Owl",
36-
artist: "Broke For Free",
37-
image: "Image URL",
38-
path: "../music/sample-9s.mp3"
39-
},
4035
{
4136
name: "Day Owl",
42-
artist: "Broke For Free",
43-
image: "Image URL",
44-
path: "/music/sample-12s.mp3"
37+
artist: "Day For Free",
38+
image: "./image.png",
39+
path: "./music/sample-9s.mp3"
4540
},
4641
{
47-
name: "ABCD Owl",
48-
artist: "Broke For Free",
49-
image: "Image URL",
50-
path: "/music/sample-15s.mp3"
42+
name: "Distracted Owl",
43+
artist: "Owl by Keo",
44+
image: "./image.png",
45+
path: "./music/sample-12s.mp3"
5146
},
52-
]
53-
54-
function loadTrack(trackIndex) {
47+
{
48+
name: "Broken Owl",
49+
artist: "Free Veda",
50+
image: "./image.png",
51+
path: "./music/sample-15s.mp3"
52+
}
53+
];
54+
55+
function loadTrack(index) {
5556
clearInterval(updateTimer);
5657
resetValues();
5758

58-
curr_track.src = track_list[trackIndex].path;
59+
curr_track.src = track_list[index].path;
5960
curr_track.load();
6061

61-
trackArt.style.backgroundImage = "url(" + track_list[trackIndex].image + ")";
62-
trackName.textContent = track_list[trackIndex].name;
63-
trackArtist.textContent = track_list[trackIndex].artist;
64-
nowPlaying.textContent = "PLAYING " + (trackIndex + 1) + " OF " + track_list.length;
62+
trackArt.style.backgroundImage = `url(${track_list[index].image})`;
63+
trackArt.style.backgroundSize = "cover";
64+
trackName.textContent = track_list[index].name;
65+
trackArtist.textContent = track_list[index].artist;
66+
nowPlaying.textContent = `PLAYING ${index + 1} OF ${track_list.length}`;
6567

6668
updateTimer = setInterval(seekUpdate, 1000);
67-
curr_track.addEventListener("ended", nextBtn);
69+
curr_track.onended = nextTrack; // Cleaner way to handle end of track
6870
random_bg_color();
6971
}
7072

7173
function resetValues() {
72-
currentTime.textContent = "00.00";
73-
totalTime.textContent = "00.00";
74-
volumeSlider.value = 0;
75-
}
76-
77-
function random_bg_color() {
78-
let red = Math.floor(Math.random() * 256) + 64;
79-
let green = Math.floor(Math.random() * 256) + 64;
80-
let blue = Math.floor(Math.random() * 256) + 64;
81-
82-
let bgColor = "rgb(" + red + ", " + green + ", " + blue + ")";
83-
document.body.style.background = bgColor;
74+
currTimeDisplay.textContent = "00:00";
75+
totalTimeDisplay.textContent = "00:00";
76+
seekSlider.value = 0;
8477
}
8578

8679
function playpauseTrack() {
87-
if(!isPlaying) playTrack();
88-
else pauseTrack();
80+
isPlaying ? pauseTrack() : playTrack();
8981
}
82+
9083
function playTrack() {
9184
curr_track.play();
9285
isPlaying = true;
93-
94-
playPauseBtn.innerHTML = '<i class = "fa fa-pause-circle fa-5x"</i>';
86+
playPauseBtn.innerHTML = '<i class="fa-solid fa-circle-pause"></i>';
9587
}
88+
9689
function pauseTrack() {
9790
curr_track.pause();
9891
isPlaying = false;
99-
100-
playPauseBtn.innerHTML = '<i class = "fa fa-play-circle fa-5x"</i>';
92+
playPauseBtn.innerHTML = '<i class="fa-solid fa-circle-play"></i>';
10193
}
102-
function nextBtn() {
103-
if(trackIndex < track_list.length - 1)
104-
trackIndex += 1;
105-
else trackIndex = 0;
10694

95+
function nextTrack() {
96+
trackIndex = (trackIndex + 1) % track_list.length;
10797
loadTrack(trackIndex);
10898
playTrack();
10999
}
110-
function prevBtn() {
111-
if(trackIndex > 0)
112-
trackIndex -= 1;
113-
else trackIndex = track_list.length - 1;
114100

101+
function prevTrack() {
102+
trackIndex = (trackIndex - 1 + track_list.length) % track_list.length;
115103
loadTrack(trackIndex);
116104
playTrack();
117105
}
106+
107+
function seekTo() {
108+
let seekto = curr_track.duration * (seekSlider.value / 100);
109+
curr_track.currentTime = seekto;
110+
}
111+
112+
function setVolume() {
113+
curr_track.volume = volumeSlider.value / 100;
114+
}
115+
116+
function seekUpdate() {
117+
if (!isNaN(curr_track.duration)) {
118+
let seekPosition = curr_track.currentTime * (100 / curr_track.duration);
119+
seekSlider.value = seekPosition;
120+
121+
let curMins = Math.floor(curr_track.currentTime / 60);
122+
let curSecs = Math.floor(curr_track.currentTime % 60);
123+
let durMins = Math.floor(curr_track.duration / 60);
124+
let durSecs = Math.floor(curr_track.duration % 60);
125+
126+
currTimeDisplay.textContent = `${curMins}:${curSecs < 10 ? '0'+curSecs : curSecs}`;
127+
totalTimeDisplay.textContent = `${durMins}:${durSecs < 10 ? '0'+durSecs : durSecs}`;
128+
}
129+
}
130+
131+
function random_bg_color() {
132+
let bgColor = `rgb(${Math.floor(Math.random()*150 + 100)}, ${Math.floor(Math.random()*150 + 100)}, ${Math.floor(Math.random()*150 + 100)})`;
133+
document.body.style.backgroundColor = bgColor;
134+
}
135+
136+
// CRITICAL: Attach your listeners
137+
playPauseBtn.addEventListener('click', playpauseTrack);
138+
nextBtnElement.addEventListener('click', nextTrack);
139+
prevBtnElement.addEventListener('click', prevTrack);
140+
seekSlider.addEventListener('change', seekTo);
141+
volumeSlider.addEventListener('change', setVolume);
142+
143+
loadTrack(trackIndex);

0 commit comments

Comments
 (0)