Skip to content

🎧 Added a Responsive Music Player Project using HTML, CSS, Tailwind CSS and JavaScript #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Submodule All-In-One-JavaScript-Projects added at a1b062
98 changes: 98 additions & 0 deletions projects/music-player-reshav/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Blurred Music Player</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body::before {
content: "";
background: url('https://via.placeholder.com/600x600.png?text=🎢') no-repeat center center / cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -2;
filter: blur(20px);
transform: scale(1.1);
}
body::after {
content: "";
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-6 text-white font-sans">

<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)]">

<!-- Album Art -->
<div class=" album overflow-hidden rounded-2xl mb-6 shadow-lg">
<img id="img" src="" alt="Album Cover" class="w-full object-cover">
</div>

<!-- Audio Element (hidden but functional) -->
<audio id="audio" src="songs\music.mp3"></audio>

<!-- Track Info -->
<div class="text-center mb-6">
<h2 id="track-title" class="text-2xl font-bold text-pink-400 tracking-tight">Levitating</h2>
<p id="artist" class="text-gray-300 text-sm">Dua Lips</p>
</div>

<!-- Progress Bar -->
<div class="mb-4">
<div class=" time flex justify-between text-xs text-gray-400 mb-1">
<p><span id="current">00:00</span></p>
<span id="duration">3:24</span>
</div>
<div id="progressContainer" class="h-2 w-full bg-gray-700 rounded-full overflow-hidden">
<div id="progress" class="h-2 w-0 bg-gradient-to-r from-pink-400 to-purple-500 rounded-full animate-pulse"></div>
</div>
</div>

<!-- Controls -->
<div class="flex items-center justify-center gap-6 mt-6">
<!-- Back -->
<button class="hover:scale-110 hover:text-pink-400 transition">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M11 17l-6-5 6-5v10zm-6-5v5H3V8h2v4z" />
</svg>
</button>

<!-- Play -->
<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">
<svg id="playIcon" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M6 4l12 6-12 6V4z" />
</svg>
</button>

<!-- Next -->
<button class="hover:scale-110 hover:text-pink-400 transition">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 17V7l6 5-6 5zm6-5V7h2v10h-2z" />
</svg>
</button>
</div>

<!-- Volume -->
<div class="mt-6 text-center text-gray-400 text-sm">
<svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M11 5L6 9H2v6h4l5 4V5zM17.3 8.7a5 5 0 010 6.6M20.54 6.46a9 9 0 010 11.08" />
</svg>
Volume
</div>

</div>

</body>
<script src="script.js"></script>
</html>
89 changes: 89 additions & 0 deletions projects/music-player-reshav/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
const audio = document.getElementById('audio');
const playBtn = document.getElementById('playBtn');
const playIcon = document.getElementById('playIcon');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progressContainer');
const time = document.getElementsByClassName('time')
const current = document.getElementById('current');
const duration = document.getElementById('duration');
const img = document.getElementById('img');
const title = document.getElementById('track-title');
const artist = document.getElementById('artist');


// Toggle play/pause
playBtn.addEventListener('click', function () {
if (audio.paused) {
audio.play();
playIcon.innerHTML = '<path d="M6 4h4v12H6zM12 4h4v12h-4z" />';
}
else {
audio.pause();
playIcon.innerHTML = '<path d="M6 4l12 6-12 6V4z" />';
}
});

// Update progress bar
audio.addEventListener('timeupdate', () => {
const percent = (audio.currentTime / audio.duration) * 100;
progress.style.width = `${percent}%`;
});


audio.addEventListener('play', () => {
img.src = "songs/img/MV5BMTE5MzM4MzAtMzE4Mi00NTNiLTk3ODktNGQ4MjQ2MzNlYjRlXkEyXkFqcGc@.jpg";

artist.textContent = "";
});

function loadSong(song) {
audio.src = song.audioSrc;
img.src = song.imgSrc;
title.textContent = song.title;
artist.textContent = song.artist;
audio.play();
}

// Example usage:
loadSong({
audioSrc: "songs/music.mp3",
imgSrc: "songs/img/MV5B...jpg",
title: "Girls Like you",
artist: "Maroon-5"
});




function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
const m = mins < 10 ? `0${mins}` : mins;
const s = secs < 10 ? `0${secs}` : secs;
return `${m}:${s}`;
}

audio.addEventListener("timeupdate", () => {
current.textContent = formatTime(audio.currentTime);
});
// Load total duration once it's available
audio.addEventListener("loadedmetadata", () => {
duration.textContent = formatTime(audio.duration);
});


//seeking anywhere
progressContainer.addEventListener('click', (e) => {
const width = progressContainer.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;

audio.currentTime = (clickX / width) * duration;

});






Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added projects/music-player-reshav/songs/music.mp3
Binary file not shown.