diff --git a/19_javascript_music_player/index.html b/19_javascript_music_player/index.html index 8a5be91..91e9197 100644 --- a/19_javascript_music_player/index.html +++ b/19_javascript_music_player/index.html @@ -29,6 +29,9 @@

Bhool Bhulaiya Title Track

+
+ 0:00 / 0:00 +
diff --git a/19_javascript_music_player/player.css b/19_javascript_music_player/player.css index 20f8f15..a464cb7 100644 --- a/19_javascript_music_player/player.css +++ b/19_javascript_music_player/player.css @@ -4,6 +4,8 @@ --playerbg: #ffe0e5; --maincolor: #f53192; --white: #fff; + --grad1: #EF16B5; + --grad2: #F276DB; --boxshadow: rgba(255, 26, 26, 0.22); --vol: #ec64f9; --volscroll: #2e29b7; */ @@ -12,6 +14,10 @@ --mainbg: #333; --playerbg: #00d2ff; --maincolor: #006bff; + --grad1: rgba(255, 227, 2, 0.41); + --grad2: rgb(59, 188, 241); + --grad3: #00f2ff; + --grad4: #29ff7b; --white: #fff; --boxshadow: rgba(0, 16, 133, 0.22); --vol: #006bff; @@ -37,6 +43,12 @@ .music-player{ background: var(--playerbg); + /* +* Created with https://www.css-gradient.com +* Gradient link: https://www.css-gradient.com/?c1=37f5ff&c2=34cf31>=l&gd=dtl +*/ +background: #37F5FF; +background: linear-gradient(135deg, var(--grad3), var(--grad4)); width: 400px; padding: 25px 35px; text-align: center; @@ -118,7 +130,7 @@ nav .circle { width: 30px; height: 30px; border-radius: 50%; - border: 8px solid #fff; + border: 8px solid var(--white); box-shadow: 0 5px 10px rgba(255, 26, 26, 0.22); } @@ -165,9 +177,13 @@ nav .circle { width:20px; height: 20px; border-radius: 50%; - border: 2px solid var(--white); + border: 4px solid var(--white); box-shadow: 0 5px 10px var(--boxshadow); } + +.timeSection { + margin-top: 0.6rem; +} /* for smaller devices */ diff --git a/19_javascript_music_player/player.js b/19_javascript_music_player/player.js index d5d4afc..f928e10 100644 --- a/19_javascript_music_player/player.js +++ b/19_javascript_music_player/player.js @@ -1,12 +1,32 @@ let progress = document.getElementById("progress"); let song = document.getElementById("song"); let ctrlIcon = document.getElementById("ctrlIcon"); +let currentTimeDisplay = document.getElementById("currentTime"); +let totalTimeDisplay = document.getElementById("totalTime"); song.onloadedmetadata = function() { progress.max = song.duration; progress.value = song.currentTime; + updateTimes(); } +// Function to format time in minutes and seconds +function formatTime(seconds) { + let minutes = Math.floor(seconds / 60); + let remainingSeconds = Math.floor(seconds % 60); + return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; +} + +// Update current time and total time +function updateTimes() { + currentTimeDisplay.textContent = formatTime(song.currentTime); + totalTimeDisplay.textContent = formatTime(song.duration); +} + + + + + function playPause() { if(ctrlIcon.classList.contains("fa-pause")) { song.pause(); @@ -23,12 +43,14 @@ function playPause() { if(song.play()) { setInterval(() => { progress.value = song.currentTime; + updateTimes(); }, 500); } progress.onchange = function(){ song.play(); song.currentTime = progress.value; + updateTimes(); } // setting up sound volume @@ -156,8 +178,16 @@ let rotateImg = document.getElementById("thumbnail"); // Get the image element song.onplay = function() { // When the song starts playing rotateImg.classList.add("rotate"); // Add the 'rotate' class to the image + ctrlIcon.classList.add("fa-pause"); + ctrlIcon.classList.remove("fa-play"); }; + song.onpause = function() { // When the song is paused rotateImg.classList.remove("rotate"); // Remove the 'rotate' class from the image -}; \ No newline at end of file +}; + +song.onended = function() { + nextSong(); +}; +