added functions in 19_javascript_music_player

- auto next added
- time count span html
- realtime time count of song in js
- color theme update

19_javascript_music_player/index.html

@@ -29,6 +29,9 @@ <h1 id="songTitle">Bhool Bhulaiya Title Track</h1>
                 <audio id="song">
                     <source id="audioSource" src="./media/audio/Bhool Bhulaiyaa 2 Title Track - Bhool Bhulaiyaa 2 128 Kbps.mp3" type="">
                 </audio>
+                <div class="timeSection">
+                    <span id="currentTime">0:00</span> / <span id="totalTime">0:00</span>
+                </div>
                 <input type="range" value="0" id="progress">
                 <div class="controls">
                     <div onclick="prevSong()"><i class="fa-solid fa-backward"></i></div>

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&gt=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  */

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
-};
+};
+
+song.onended = function() {
+    nextSong();
+};
+