DSC-Galgotias · noman2002 · Oct 18, 2021 · Oct 17, 2021
diff --git a/Music Player/images/1.jpg b/Music Player/images/1.jpg
diff --git a/Music Player/images/2.jpg b/Music Player/images/2.jpg
diff --git a/Music Player/images/3.jpg b/Music Player/images/3.jpg
diff --git a/Music Player/images/4.jpg b/Music Player/images/4.jpg
diff --git a/Music Player/images/5.jpg b/Music Player/images/5.jpg
diff --git a/Music Player/images/6.jpg b/Music Player/images/6.jpg
diff --git a/Music Player/images/7.jpg b/Music Player/images/7.jpg
diff --git a/Music Player/index.html b/Music Player/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://kit.fontawesome.com/a2b3da0c65.js" crossorigin="anonymous"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <title>Music Player</title>
+</head>
+<body>
+    <main class="player">
+        <div class="header">
+            <a href="#" class="button">
+                <i class="fas fa-bars"></i>
+                <!-- <span class="sr-only">Menu Bar</span> -->
+            </a>
+            <p>Now Playing</p>
+            <a href="#" class="button">
+                <label>
+                    <input type="checkbox" name="theme">
+                    <!-- <span class="btn sr-only">Search</span> -->
+                    <i class="fas fa-moon"></i>
+                </label>
+            </a>
+        </div>
+        <img src="images/1.jpg" alt="album" id="image" class="image">
+        <div class="information">
+            <h1 id="playlist_status"></h1>
+            <p id="playlist_artist"></p>
+        </div>
+        <div class="progress">
+            <div class="progress-time">
+                <span id="currenttimetext" class="left">00:00</span>
+                <span id="durationtimetext" class="right">00:00</span>
+            </div>
+            <div class="progress-bar">
+                <input type="range" name="" id="seekslider" class="seekslider" min="0" max="100" value="0" step="1">
+            </div>
+        </div>
+        <ul class="buttons">
+            <span id="random" class="shuffle button button-sm">
+                <i class="fas fa-random fa-sm"></i>
+            </span>
+            <span id="prevbtn" class="prev button button-md">
+                <i class="fas fa-step-backward"></i>
+            </span>
+            <span id="playpausebtn" class="playpause button button-lg">
+                <i class="fas fa-play fa-lg"></i>
+                <i class="fas fa-pause fa-lg"></i>
+            </span>
+            <span id="nextbtn" class="next button button-md">
+                <i class="fas fa-step-forward"></i>
+            </span>
+            <span id="repeat" class="loop button button-sm">
+                <i class="fas fa-circle-notch fa-sm"></i>
+            </span>
+        </ul>
+        <div class="bar"></div>
+    </main>
+    <script
+  src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Music Player/script.js b/Music Player/script.js
@@ -0,0 +1,165 @@
+var audio , playbtn , title , poster , artists , seekslider , seeking=false , seekto, currenttimetext , durationtimetext , playlist_status , dir , playlist , ext , agent , playlists_artists , repeat , random;
+
+dir = "songs/";
+playlist = ["Cartoon - On & On" , "Diviners-X-Riell-Slow" , "InfiNoise-Sunlight","Jone - Everything","Last Heroes x TwoWorldsApart - Eclipse","Lost Sky - Fearless pt.II","Xaia, Rain Man, Oly - Breakdown"]
+
+title =["Cartoon - On & On" , "Slow" , "Sunlight","Everything","Last Heroes","Fearless","Breakdown"]
+poster=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg"]
+artists=["Daniel Levi", "Diviners-X-Riell","Nilka","Jone","AERYN","Chris Linton","Xaia, Rain Man, Oly"]
+
+playlist_index = 0;
+
+ext =".mp3"
+agent = navigator.userAgent.toLowerCase();
+if(agent.indexOf('firefox') != -1 || agent.indexOf('opera') != -1){
+    ext=".ogg";
+}
+playbtn = document.getElementById("playpausebtn");
+nextbtn = document.getElementById("nextbtn");
+prevbtn = document.getElementById("prevbtn");
+seekslider = document.getElementById("seekslider");
+currenttimetext = document.getElementById("currenttimetext");
+durationtimetext = document.getElementById("durationtimetext");
+playlist_status = document.getElementById("playlist_status");
+playlists_artists = document.getElementById("playlist_artist");
+repeat = document.getElementById("repeat");
+randomSong = document.getElementById("random");
+
+audio = new Audio();
+audio.src = dir+playlist[0]+ext;
+audio.loop = false;
+
+playlist_status.innerHTML = title[playlist_index];
+playlists_artists.innerHTML = artists[playlist_index];
+
+playbtn.addEventListener("click",playPause);
+nextbtn.addEventListener("click",nextSong);
+prevbtn.addEventListener("click",prevSong);
+seekslider.addEventListener("mousedown" , function(event){ seeking=true; seek(event);});
+seekslider.addEventListener("mousemove",function(event){ seek(event);});
+
+seekslider.addEventListener("mouseup", function(){seeking=false;});
+
+audio.addEventListener("timeupdate",function(){seektimeupdate();});
+audio.addEventListener("ended",function(){
+    switchTrack();
+});
+repeat.addEventListener("click",loop);
+randomSong.addEventListener("click",random);
+
+
+
+
+//functions
+
+function fetchMusicDetail(){
+    $("#image").attr("src",poster[playlist_index]);
+
+    playlist_status.innerHTML = title[playlist_index];
+    playlist_artist.innerHTML = artists[playlist_index];
+
+    audio.src = dir+playlist[playlist_index]+ext;
+    audio.play();
+}
+
+
+function getRandomNumber(min , max){
+    let step1 = max - min + 1;
+    let step2 = Math.random() * step1;
+    let result = Math.floor(step2) + min;
+    return result;
+}
+
+function random(){
+    let randomIndex = getRandomNumber(0 , playlist.length-1);
+    playlist_index = randomIndex;
+    fetchMusicDetail();
+    document.querySelector(".playpause").classList.add("active");
+}
+
+function loop(){
+    if(audio.loop){
+        audio.loop = false;
+        document.querySelector(".loop").classList.remove("active");
+    }else{
+        audio.loop = true;
+        document.querySelector(".loop").classList.add("active");
+    }
+}
+
+function nextSong(){
+    document.querySelector(".playpause").classList.add("active");
+    playlist_index++;
+    if(playlist_index > playlist.length - 1){
+        playlist_index = 0;
+    }
+    fetchMusicDetail();
+}
+function prevSong(){
+    document.querySelector(".playpause").classList.add("active");
+    playlist_index--;
+    if(playlist_index < 0){
+        playlist_index = playlist.length - 1;
+    }
+    fetchMusicDetail();
+}
+
+function playPause(){
+    if(audio.paused){
+        audio.play();
+        document.querySelector(".playpause").classList.add("active");
+    }else{
+        audio.pause();
+        document.querySelector(".playpause").classList.remove("active");
+    }
+}
+
+function switchTrack(){
+    if(playlist_index == (playlist.length - 1)){
+        playlist_index = 0;
+    }else{
+        playlist_index++;
+    }
+    fetchMusicDetail();
+}
+
+function seek(event){
+    if(audio.duration == 0){
+        null
+    }else{
+        if(seeking){
+            seekslider.value = event.clientX - seekslider.offsetLeft;
+            seekto = audio.duration * (seekslider.value / 100);
+            audio.currentTime = seekto;
+        }
+    }
+}
+
+function seektimeupdate(){
+    if(audio.duration){
+        var nt = audio.currentTime * (100 / audio.duration);
+        seekslider.value = nt;
+        var curmins = Math.floor(audio.currentTime / 60); 
+        var cursecs = Math.floor(audio.currentTime - curmins * 60); 
+        var durmins = Math.floor(audio.duration / 60); 
+        var dursecs = Math.floor(audio.duration - durmins * 60); 
+        if(cursecs < 10){ cursecs = "0"+cursecs; }
+        if(dursecs < 10){ dursecs = "0"+dursecs; }
+        if(curmins < 10){ curmins = "0"+curmins; }
+        if(durmins < 10){ durmins = "0"+durmins; }
+        currenttimetext.innerHTML = curmins+":"+cursecs;
+        durationtimetext.innerHTML = durmins+":"+dursecs;
+    }else{
+        currenttimetext.innerHTML = "00"+":"+"00";
+        durationtimetext.innerHTML = "00"+":"+"00";
+    }
+}
+
+let checkbox = document.querySelector('input[name=theme]');
+checkbox.addEventListener('change',function(){
+    if(this.checked){
+        document.documentElement.setAttribute('data-theme','dark');
+    }else{
+        document.documentElement.setAttribute('data-theme','light');
+    }
+})
diff --git a/Music Player/songs/Cartoon - On & On.mp3 b/Music Player/songs/Cartoon - On & On.mp3
diff --git a/Music Player/songs/Diviners-X-Riell-Slow.mp3 b/Music Player/songs/Diviners-X-Riell-Slow.mp3
diff --git a/Music Player/songs/InfiNoise-Sunlight.mp3 b/Music Player/songs/InfiNoise-Sunlight.mp3
diff --git a/Music Player/songs/Jone - Everything.mp3 b/Music Player/songs/Jone - Everything.mp3
diff --git a/Music Player/songs/Last Heroes x TwoWorldsApart - Eclipse.mp3 b/Music Player/songs/Last Heroes x TwoWorldsApart - Eclipse.mp3
diff --git a/Music Player/songs/Lost Sky - Fearless pt.II.mp3 b/Music Player/songs/Lost Sky - Fearless pt.II.mp3
diff --git a/Music Player/songs/Xaia, Rain Man, Oly - Breakdown.mp3 b/Music Player/songs/Xaia, Rain Man, Oly - Breakdown.mp3