Javascript learning project Music app

Designed this music app in this app we can play ,pause ,choose next or previous music .This is my learning project in this project i have learned a lot related to music api. It's not 100% fine but i will make this 100% accurate by taking some help from senior developers thanks
Afraz-Hussain · May 31, 2024 · 8d32193 · 8d32193
commit 8d32193
Show file tree

Hide file tree

Showing 10 changed files with 320 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Music App Made by Afraz</title>
+    <link rel="stylesheet" href="style.css">
+    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+</head>
+<body>
+
+    <div class="container">
+
+        <div class="pic">
+            <img src="song.jpg" alt="Song Image" class="songimg">
+        </div>
+        <div class="singername "></div>
+        <div class="progresscontainer ">
+            <div class="time flex">
+                <h3 class="starttime"></h3>
+                <div class="progressbar"></div>
+                <h3 class="endtime"></h3>
+            </div>
+        </div>
+        <div class="control">
+            <audio class="audio"></audio>
+            <ion-icon name="play-outline" class="leftbtn"></ion-icon>
+            <ion-icon name="play-circle-outline" class="playbtn"></ion-icon>
+            <ion-icon name="pause-circle-outline" class="pausebtn none"></ion-icon>
+            <ion-icon name="play-outline" class="rightbtn"></ion-icon>
+        </div>
+    </div>
+</body>
+</html>
+<script src="music-app.js"></script>
diff --git a/music-app.js b/music-app.js
@@ -0,0 +1,195 @@
+let leftbtn=document.querySelector(".leftbtn")
+let righttbtn=document.querySelector(".rightbtn")
+
+let playbtn=document.querySelector(".playbtn")
+let pausebtn=document.querySelector(".pausebtn")
+
+let piccontainer=document.querySelector(".pic")
+
+let singer=document.querySelector(".singername")
+
+
+let audio=document.querySelector(".audio")
+// Timers
+
+let progresscontainer=document.querySelector('.progresscontainer')
+let starttime=document.querySelector('.starttime')
+let endtime=document.querySelector('.endtime')
+
+
+let pics=[
+{id:1,img:'pics/images(1).jpeg'},
+{id:2,img:'pics/images.jpeg'},
+{id:3,img:'pics/images3.jpg'},
+
+];
+let picindex=0
+
+let songs=['music/music1.mp3',"music/music2.mp3",'music/music3.mp3'];
+let singername=["Tom","oggy","simon"];
+let singerindex=0;
+let songindex=0;
+
+const showpic=(index)=>{
+    piccontainer.innerHTML=`
+    <img src=${pics[index].img} alt=${picindex+1} class="songimg">
+    `
+    //Will do load corresponding songs...
+    loadmusic(songs[index]);
+      // Will load corresponding sinernames...
+    showsingername(singername[singerindex])
+
+
+}
+
+const showsingername=(name)=>{
+    singer.innerHTML=`${name}`
+}
+
+const loadmusic=(song)=>{
+ audio.src=song
+}
+function playsong(){
+    audio.play()
+}
+function pausesong(){
+    audio.pause()
+}
+
+function prevsong(){
+songindex--
+if(songindex<0){
+songindex=songs.length-1;
+
+}
+else{
+    loadmusic[songs[songindex]]
+}
+playsong()
+}
+function nextsong()
+{
+songindex++
+if(songindex>songs.length-1){
+    songindex=0
+}  loadmusic[songs[songindex]]
+pausesong()
+
+}
+
+leftbtn.addEventListener("click",()=>{
+//singer name
+singerindex--
+if(singerindex>0){
+    singerindex--
+    showsingername(singername[singerindex])
+}
+else{
+    singerindex=singername.length-1;
+    showsingername(singername[singerindex])
+}
+
+
+    //music
+prevsong()
+// check if pic len is 0
+if(picindex>0){
+    picindex--
+    showpic(picindex)
+}
+else{
+    picindex=pics.length-1;
+    showpic(picindex)
+}
+
+})
+
+righttbtn.addEventListener("click",()=>{
+singerindex++
+if(singerindex<singername.length-1){
+    singerindex++
+    showsingername(singername[singerindex])
+}
+else{
+    singerindex=0;
+    showsingername(singername[singerindex])
+}
+
+
+
+nextsong()
+
+if(picindex<pics.length-1){
+    picindex++
+    showpic(picindex)
+}
+
+else{
+    picindex=0
+    showpic(picindex)
+}
+
+
+
+})
+
+playbtn.addEventListener("click",()=>{
+    //1.music will get played...
+
+
+//audio.play()
+playsong()
+    //2.play btn will get hide
+
+
+    playbtn.classList.add('none');
+    playbtn.classList.remove('show');
+    //3.pause btn will get displayed..
+    pausebtn.classList.add('show')
+    pausebtn.classList.remove('none');
+})
+
+
+
+
+
+
+pausebtn.addEventListener("click",()=>{
+    //1.music will get played...
+//audio.pause()
+pausesong()
+    //2.play btn will get show
+
+
+    playbtn.classList.add('show');
+    playbtn.classList.remove('none');
+
+    //3.pause btn will hide..
+    pausebtn.classList.add('none')
+    pausebtn.classList.remove('show')
+})
+
+function updatetime(e) {
+    progresscontainer.style.display='block'
+    let endtimevalue = e.srcElement.duration;
+    let starttimevalue = e.srcElement.currentTime;
+
+
+    let formatTime = (time) => {
+        let minutes = Math.floor(time / 60);
+        let seconds = Math.floor(time % 60);
+        if (seconds < 10) seconds = "0" + seconds;
+        return minutes + ":" + seconds;
+    };
+
+    // Update the text content
+    endtime.textContent = formatTime(endtimevalue);
+    starttime.textContent = formatTime(starttimevalue);
+}
+
+audio.addEventListener('timeupdate', updatetime);
+
+//when our muics got ended 
+
+audio.addEventListener('ended',nextsong);
+showpic(picindex)
diff --git a/music/music1.mp3 b/music/music1.mp3
diff --git a/music/music2.mp3 b/music/music2.mp3
diff --git a/music/music3.mp3 b/music/music3.mp3
diff --git a/pics/images (1).jpeg b/pics/images (1).jpeg
diff --git a/pics/images(1).jpeg b/pics/images(1).jpeg
diff --git a/pics/images.jpeg b/pics/images.jpeg
diff --git a/pics/images3.jpg b/pics/images3.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,89 @@
+@import url('https://fonts.googleapis.com/css2?family=Meddon&display=swap');
+
+body {
+    background: radial-gradient(circle, rgb(1, 8, 44) 0%, rgb(143, 2, 30) 100%);
+    font-family: "Meddon", cursive;
+    font-weight: 400;
+    font-style: normal;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+.container {
+    width: 400px;
+    height: 440px;
+    border: 1px solid white;
+    border-radius: 7px;
+    box-shadow: 0 14px 30px rgba(255, 255, 255, 0.377);
+    backdrop-filter: blur(6px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    text-align: center;
+}
+
+.pic {
+    margin-bottom: 20px;
+}
+
+.singername {
+    color: white;
+    font-size: 30px;
+    margin-bottom: 20px;
+}
+
+.songimg {
+    border: 1px solid white;
+    width: 150px;
+    height: 150px;
+    border-radius: 150px;
+}
+
+.control {
+    font-size: 33px;
+    color: white;
+    display: flex;
+   justify-content: center;
+   gap: 20px;
+    width: 100%;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
+.none {
+    display: none;
+}
+
+.show {
+    display: block;
+}
+
+.leftbtn {
+    transform: rotate(-180deg);
+}
+
+.progresscontainer{
+
+    background-color: #fcb900;
+    color: white;
+    padding: 15px 45px;
+    display: none;
+    transition: 0.5s linear;
+}
+.progressbar{
+    width: 40px;
+    color: red;
+    height: 3px;
+}