Skip to content

Commit e5c904b

Browse files
Reshav-RoushanReshav-Roushan
committed
Add music player project from desktop folder
1 parent a1b0629 commit e5c904b

5 files changed

Lines changed: 188 additions & 0 deletions

File tree

‎projects/music-player-reshav/All-In-One-JavaScript-Projects‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit a1b062964967cf7f589e2991955251a817a0ce86

‎projects/music-player-reshav/index.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Blurred Music Player</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<style>
9+
body::before {
10+
content: "";
11+
background: url('https://via.placeholder.com/600x600.png?text=🎶') no-repeat center center / cover;
12+
position: fixed;
13+
top: 0;
14+
left: 0;
15+
right: 0;
16+
bottom: 0;
17+
z-index: -2;
18+
filter: blur(20px);
19+
transform: scale(1.1);
20+
}
21+
body::after {
22+
content: "";
23+
background: rgba(0, 0, 0, 0.6);
24+
position: fixed;
25+
top: 0;
26+
left: 0;
27+
right: 0;
28+
bottom: 0;
29+
z-index: -1;
30+
}
31+
</style>
32+
</head>
33+
<body class="min-h-screen flex items-center justify-center p-6 text-white font-sans">
34+
35+
<div class="bg-white/10 border border-white/20 backdrop-blur-xl rounded-3xl shadow-2xl p-6 max-w-sm w-full transition duration-300 hover:shadow-[0_0_30px_5px_rgba(236,72,153,0.3)]">
36+
37+
<!-- Album Art -->
38+
<div class=" album overflow-hidden rounded-2xl mb-6 shadow-lg">
39+
<img id="img" src="" alt="Album Cover" class="w-full object-cover">
40+
</div>
41+
42+
<!-- Audio Element (hidden but functional) -->
43+
<audio id="audio" src="songs\music.mp3"></audio>
44+
45+
<!-- Track Info -->
46+
<div class="text-center mb-6">
47+
<h2 id="track-title" class="text-2xl font-bold text-pink-400 tracking-tight">Levitating</h2>
48+
<p id="artist" class="text-gray-300 text-sm">Dua Lips</p>
49+
</div>
50+
51+
<!-- Progress Bar -->
52+
<div class="mb-4">
53+
<div class=" time flex justify-between text-xs text-gray-400 mb-1">
54+
<p><span id="current">00:00</span></p>
55+
<span id="duration">3:24</span>
56+
</div>
57+
<div id="progressContainer" class="h-2 w-full bg-gray-700 rounded-full overflow-hidden">
58+
<div id="progress" class="h-2 w-0 bg-gradient-to-r from-pink-400 to-purple-500 rounded-full animate-pulse"></div>
59+
</div>
60+
</div>
61+
62+
<!-- Controls -->
63+
<div class="flex items-center justify-center gap-6 mt-6">
64+
<!-- Back -->
65+
<button class="hover:scale-110 hover:text-pink-400 transition">
66+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
67+
<path d="M11 17l-6-5 6-5v10zm-6-5v5H3V8h2v4z" />
68+
</svg>
69+
</button>
70+
71+
<!-- Play -->
72+
<button id="playBtn" class=" bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white p-4 rounded-full shadow-lg shadow-pink-500/30 transition hover:scale-110">
73+
<svg id="playIcon" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
74+
<path d="M6 4l12 6-12 6V4z" />
75+
</svg>
76+
</button>
77+
78+
<!-- Next -->
79+
<button class="hover:scale-110 hover:text-pink-400 transition">
80+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
81+
<path d="M9 17V7l6 5-6 5zm6-5V7h2v10h-2z" />
82+
</svg>
83+
</button>
84+
</div>
85+
86+
<!-- Volume -->
87+
<div class="mt-6 text-center text-gray-400 text-sm">
88+
<svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
89+
<path d="M11 5L6 9H2v6h4l5 4V5zM17.3 8.7a5 5 0 010 6.6M20.54 6.46a9 9 0 010 11.08" />
90+
</svg>
91+
Volume
92+
</div>
93+
94+
</div>
95+
96+
</body>
97+
<script src="script.js"></script>
98+
</html>

‎projects/music-player-reshav/script.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
const audio = document.getElementById('audio');
2+
const playBtn = document.getElementById('playBtn');
3+
const playIcon = document.getElementById('playIcon');
4+
const progress = document.getElementById('progress');
5+
const progressContainer = document.getElementById('progressContainer');
6+
const time = document.getElementsByClassName('time')
7+
const current = document.getElementById('current');
8+
const duration = document.getElementById('duration');
9+
const img = document.getElementById('img');
10+
const title = document.getElementById('track-title');
11+
const artist = document.getElementById('artist');
12+
13+
14+
// Toggle play/pause
15+
playBtn.addEventListener('click', function () {
16+
if (audio.paused) {
17+
audio.play();
18+
playIcon.innerHTML = '<path d="M6 4h4v12H6zM12 4h4v12h-4z" />';
19+
}
20+
else {
21+
audio.pause();
22+
playIcon.innerHTML = '<path d="M6 4l12 6-12 6V4z" />';
23+
}
24+
});
25+
26+
// Update progress bar
27+
audio.addEventListener('timeupdate', () => {
28+
const percent = (audio.currentTime / audio.duration) * 100;
29+
progress.style.width = `${percent}%`;
30+
});
31+
32+
33+
audio.addEventListener('play', () => {
34+
img.src = "songs/img/MV5BMTE5MzM4MzAtMzE4Mi00NTNiLTk3ODktNGQ4MjQ2MzNlYjRlXkEyXkFqcGc@.jpg";
35+
36+
artist.textContent = "";
37+
});
38+
39+
function loadSong(song) {
40+
audio.src = song.audioSrc;
41+
img.src = song.imgSrc;
42+
title.textContent = song.title;
43+
artist.textContent = song.artist;
44+
audio.play();
45+
}
46+
47+
// Example usage:
48+
loadSong({
49+
audioSrc: "songs/music.mp3",
50+
imgSrc: "songs/img/MV5B...jpg",
51+
title: "Girls Like you",
52+
artist: "Maroon-5"
53+
});
54+
55+
56+
57+
58+
function formatTime(seconds) {
59+
const mins = Math.floor(seconds / 60);
60+
const secs = Math.floor(seconds % 60);
61+
const m = mins < 10 ? `0${mins}` : mins;
62+
const s = secs < 10 ? `0${secs}` : secs;
63+
return `${m}:${s}`;
64+
}
65+
66+
audio.addEventListener("timeupdate", () => {
67+
current.textContent = formatTime(audio.currentTime);
68+
});
69+
// Load total duration once it's available
70+
audio.addEventListener("loadedmetadata", () => {
71+
duration.textContent = formatTime(audio.duration);
72+
});
73+
74+
75+
//seeking anywhere
76+
progressContainer.addEventListener('click', (e) => {
77+
const width = progressContainer.clientWidth;
78+
const clickX = e.offsetX;
79+
const duration = audio.duration;
80+
81+
audio.currentTime = (clickX / width) * duration;
82+
83+
});
84+
85+
86+
87+
88+
89+

‎projects/music-player-reshav/songs/img/MV5BMTE5MzM4MzAtMzE4Mi00NTNiLTk3ODktNGQ4MjQ2MzNlYjRlXkEyXkFqcGc@.jpg‎

106 KB
Loading

‎projects/music-player-reshav/songs/music.mp3‎

10.3 MB
Binary file not shown.

0 commit comments

Comments
 (0)