diff --git a/projects/music-player-reshav/All-In-One-JavaScript-Projects b/projects/music-player-reshav/All-In-One-JavaScript-Projects new file mode 160000 index 0000000..a1b0629 --- /dev/null +++ b/projects/music-player-reshav/All-In-One-JavaScript-Projects @@ -0,0 +1 @@ +Subproject commit a1b062964967cf7f589e2991955251a817a0ce86 diff --git a/projects/music-player-reshav/index.html b/projects/music-player-reshav/index.html new file mode 100644 index 0000000..0f4086c --- /dev/null +++ b/projects/music-player-reshav/index.html @@ -0,0 +1,98 @@ + + + + + + Blurred Music Player + + + + + +
+ + +
+ Album Cover +
+ + + + + +
+

Levitating

+

Dua Lips

+
+ + +
+
+

00:00

+ 3:24 +
+
+
+
+
+ + +
+ + + + + + + + +
+ + +
+ + + + Volume +
+ +
+ + + + diff --git a/projects/music-player-reshav/script.js b/projects/music-player-reshav/script.js new file mode 100644 index 0000000..b448fd3 --- /dev/null +++ b/projects/music-player-reshav/script.js @@ -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 = ''; + } + else { + audio.pause(); + playIcon.innerHTML = ''; + } +}); + +// 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; + +}); + + + + + + diff --git a/projects/music-player-reshav/songs/img/MV5BMTE5MzM4MzAtMzE4Mi00NTNiLTk3ODktNGQ4MjQ2MzNlYjRlXkEyXkFqcGc@.jpg b/projects/music-player-reshav/songs/img/MV5BMTE5MzM4MzAtMzE4Mi00NTNiLTk3ODktNGQ4MjQ2MzNlYjRlXkEyXkFqcGc@.jpg new file mode 100644 index 0000000..be4c4a0 Binary files /dev/null and b/projects/music-player-reshav/songs/img/MV5BMTE5MzM4MzAtMzE4Mi00NTNiLTk3ODktNGQ4MjQ2MzNlYjRlXkEyXkFqcGc@.jpg differ diff --git a/projects/music-player-reshav/songs/music.mp3 b/projects/music-player-reshav/songs/music.mp3 new file mode 100644 index 0000000..e36719e Binary files /dev/null and b/projects/music-player-reshav/songs/music.mp3 differ