first.js

let music=new Audio("audio/1.mp3");
// music.play()

let songs=[
    {
        Id:1,
        poster:"img/1.jpeg",
        song_name:`Agar tum<br>
                        <div class="subtitle">Arijit</div>`
    },

    {
        Id:2,
        poster:"img/2.jpeg",
        song_name:`Darkside<br>
                        <div class="subtitle">Sonu Nigam</div>`
    },
    
    {
        Id:3,
        poster:"img/3.jpeg",
        song_name:`Chaleya<br>
                        <div class="subtitle">Arijit</div>`
    },
    
    {
        Id:4,
        poster:"img/4.jpeg",
        song_name:`Gale lagan hi<br>
                        <div class="subtitle">Tony</div>`
    },
    
    {
        Id:5,
        poster:"img/5.jpeg",
        song_name:`Afra e frig<br>
                        <div class="subtitle">Dr juess</div>`
    },
    
    {
        Id:6,
        poster:"img/6.jpeg",
        song_name:`Ek dil ruba<br>
                        <div class="subtitle">Sonu Nigam</div>`
    },
    
    {
        Id:7,
        poster:"img/7.jpeg",
        song_name:`Jo Tum mere ho<br>
                        <div class="subtitle">Arijit singh</div>`
    },
    
    {
        Id:8,
        poster:"img/8.jpeg",
        song_name:`Yaad <br>
                        <div class="subtitle">Dr juess</div>`
    },
    
    {
        Id:9,
        poster:"img/9.jpeg",
        song_name:`Guli mata<br>
                        <div class="subtitle">Honey singh</div>`
    },
    
    {
        Id:10,
        poster:"img/10.jpeg",
        song_name:`Heeriye<br>
                        <div class="subtitle">Arijit</div>`
    },
    
    {
        Id:11,
        poster:"img/11.jpeg",
        song_name:`Jal beech khada<br>
                        <div class="subtitle">Deenanath</div>`
    },
    
    {
        Id:12,
        poster:"img/12.jpeg",
        song_name:`Let Me Down<br>
                        <div class="subtitle">DR juess</div>`
    },
    
    {
        Id:13,
        poster:"img/13.jpeg",
        song_name:`Makhna<br>
                        <div class="subtitle">Honey singh</div>`
    },
    
    {
        Id:14,
        poster:"img/14.jpeg",
        song_name:`Phir Bhi<br>
                        <div class="subtitle">Arijit</div>`
    },
    
    {
        Id:15,
        poster:"img/15.jpeg",
        song_name:`Radh Braj jan<br>
                        <div class="subtitle">Deenanath</div>`
    },
    
    {
        Id:16,
        poster:"img/16.jpeg",
        song_name:`Rama Rama Ratate<br>
                        <div class="subtitle">Sonu Nigam</div>`
    },
    
    {
        Id:17,
        poster:"img/17.jpeg",
        song_name:`Senorita<br>
                        <div class="subtitle">Dr Juess</div>`
    },
    
    {
        Id:18,
        poster:"img/18.jpeg",
        song_name:`Shayad<br>
                        <div class="subtitle">Arijit</div>`
    },
    
    {
        Id:19,
        poster:"img/19.jpeg",
        song_name:`Simroon tera naam<br>
                        <div class="subtitle">Sonu Nigam</div>`
    },
    
    {
        Id:20,
        poster:"img/20.jpeg",
        song_name:`Thodi jagah<br>
                        <div class="subtitle">Arijit</div>`
    },
    
    {
        Id:21,
        poster:"img/21.jpeg",
        song_name:`Tum hi ana<br>
                        <div class="subtitle">Arijit singh</div>`
    },
    
    {
        Id:22,
        poster:"img/22.jpeg",
        song_name:`Tum Tum<br>
                        <div class="subtitle">Dr Juess</div>`
    },
    
    {
        Id:23,
        poster:"img/23.jpeg",
        song_name:`Uska hi banana<br>
                        <div class="subtitle">Badsha</div>`
    },
    
    {
        Id:24,
        poster:"img/24.jpeg",
        song_name:`Yeh Raten<br>
                        <div class="subtitle">Sonu Nigam</div>`
    },
   
]


Array.from(document.getElementsByClassName("songitem")).forEach((e,i)=>{
    e.getElementsByTagName("img")[0].src=songs[i].poster ;
    e.getElementsByTagName("h5")[0].innerHTML=songs[i].song_name ;
})

let masterplay=document.getElementById("masterplay")
let wave=document.getElementsByClassName("wave")[0];
masterplay.addEventListener("click",()=>{
    if(music.paused || music.currentTime <=0){
        music.play();
        masterplay.classList.remove('fa-play')
        masterplay.classList.add('fa-pause')
        wave.classList.add("active1")
    }
    else{
        music.pause();
        masterplay.classList.remove('fa-pause')
        masterplay.classList.add('fa-play')
        wave.classList.remove("active1")
    }
})

let makeplayall=()=>{
    Array.from(document.getElementsByClassName("playlistplay")).forEach((elem)=>{
        elem.classList.remove("fa-circle-pause")
        elem.classList.add("fa-circle-play")
        
    })
}

let makebackground=()=>{
    Array.from(document.getElementsByClassName("songitem")).forEach((elem)=>{
        elem.style.background ="rgb(118, 114, 114,.0)";
    })
}
let index=0;
let title=document.getElementsByClassName("title")[0];
Array.from(document.getElementsByClassName("playlistplay")).forEach((evt)=>{
    evt.addEventListener("click",(event)=>{
        index=event.target.id;
        music.src=`audio/${index}.mp3`;
        document.getElementsByClassName("poster_master_play")[0].src=`img/${index}.jpeg`;
        music.play();
        masterplay.classList.remove('fa-play')
        masterplay.classList.add('fa-pause')
        let titles=songs.filter((els)=>{
            return els.Id == index;
        })
        title.innerHTML=titles[0].song_name;
       
        makebackground();
        Array.from(document.getElementsByClassName("songitem"))[index-1].style.background = "rgb(118, 114, 114,.1";
        makeplayall();
        event.target.classList.remove("fa-circle-play")
        event.target.classList.add("fa-circle-pause")
        wave.classList.add("active1")
   
    })
})

let currentstart=document.getElementById("currentstart")
let currentend=document.getElementById("currentend")
let seek=document.getElementById("seek")
let dot2=document.getElementById("dot2")
let bar2=document.getElementById("bar2")
music.addEventListener("timeupdate",()=>{
    let curr_time=music.currentTime;
    let durr_time=music.duration;

    let min1=Math.floor(curr_time/60);
    let sec1=Math.floor(curr_time%60);
    if(sec1<10){
        sec1=`0${sec1}`
    }
    currentstart.innerText=`${min1}:${sec1}`

    let min2=Math.floor(durr_time/60);
    let sec2=Math.floor(durr_time%60);
    if(sec2<10){
        sec2=`0${sec2}`
    }
    currentend.innerText=`${min2}:${sec2}`

    let progress=(curr_time/durr_time)*100;
    seek.value=progress;
    bar2.style.width=`${progress}%`
    dot2.style.left=`${progress}%`
})

seek.addEventListener("change",()=>{
    music.currentTime=(seek.value*music.duration)/100;
})

let vol_icon=document.getElementsByClassName("vol_icon")[0];
let vol=document.getElementById("vol")
let vol_dot=document.getElementById("vol_dot")
let vol_bar=document.getElementsByClassName("vol_bar")[0];

vol.addEventListener("change",()=>{
    if(vol.value ==0){
        vol_icon.classList.add("fa-volume-off")
        vol_icon.classList.remove("fa-volume-high")
        vol_icon.classList.remove("fa-volume-low")
    }
    else if(vol.value > 0 && vol.value <50){
        vol_icon.classList.add("fa-volume-low")
        vol_icon.classList.remove("fa-volume-high")
        vol_icon.classList.remove("fa-volume-off")
    }
    else{
        vol_icon.classList.add("fa-volume-high")
        vol_icon.classList.remove("fa-volume-off")
        vol_icon.classList.remove("fa-volume-low")
    }
    let vol_a=vol.value;
    vol_dot.style.left=`${vol_a}%`
    vol_bar.style.width=`${vol_a}%`
    music.volume=vol_a/100
})

let forward=document.getElementsByClassName("fa-forward-step")[0];
let backward=document.getElementsByClassName("fa-backward-step")[0];
backward.addEventListener("click",()=>{
    index--;
    if(index<1){
        index=songs.length;
    }
   
    music.src=`audio/${index}.mp3`;
    document.getElementsByClassName("poster_master_play")[0].src=`img/${index}.jpeg`;
    music.play();
    masterplay.classList.remove('fa-play')
    masterplay.classList.add('fa-pause')
    let titles=songs.filter((els)=>{
        return els.Id == index;
    })
    title.innerHTML=titles[0].song_name;
    makebackground();
    Array.from(document.getElementsByClassName("songitem"))[index-1].style.background = "rgb(118, 114, 114,.1";
    makeplayall();
//    event.target.classList.remove("fa-circle-play")
//     event.target.classList.add("fa-circle-pause")
    wave.classList.add("active1")
})
forward.addEventListener("click",()=>{
    index++;
    if(index>songs.length){
        index=1;
    }
   
    music.src=`audio/${index}.mp3`;
    document.getElementsByClassName("poster_master_play")[0].src=`img/${index}.jpeg`;
    music.play();
    masterplay.classList.remove('fa-play')
    masterplay.classList.add('fa-pause')
    let titles=songs.filter((els)=>{
        return els.Id == index;
    })
    title.innerHTML=titles[0].song_name;
    makebackground();
    Array.from(document.getElementsByClassName("songitem"))[index-1].style.background = "rgb(118, 114, 114,.1";
    makeplayall();
//    event.target.classList.remove("fa-circle-play")
//     event.target.classList.add("fa-circle-pause")
    wave.classList.add("active1")
})


let download_music=document.getElementById("download_music")
download_music.addEventListener("click",()=>{
    download_music.href=`audio/${index}.mp3`;
    let titles=songs.filter((els)=>{
        return els.Id == index;
    })
    download_music.setAttribute("download",titles[0].song_name);
})

let suffle=document.getElementsByClassName("suffle")[0];
suffle.addEventListener("click",()=>{
    let a=suffle.textContent;
    switch (a) {
        case "next":
            suffle.classList.remove("fa-music")
            suffle.classList.add("fa-shuffle")
            suffle.classList.remove("fa-repeat")
            suffle.innerHTML=`<span>random</span>`
            break;
        case "random":
            suffle.classList.remove("fa-shuffle")
            suffle.classList.add("fa-repeat")
            suffle.classList.remove("fa-music")
            suffle.innerHTML=`<span>repeat</span>`
            break;
        case "repeat":
            suffle.classList.remove("fa-shuffle")
            suffle.classList.add("fa-music")
            suffle.classList.remove("fa-repeat")
            suffle.innerHTML=`<span>next</span>`
            break;
                
    }
})


let music_next=function(){
    if(index==songs.length){
        index=1;
    }
    else{
        index++;
    }
    music.src=`audio/${index}.mp3`;
    document.getElementsByClassName("poster_master_play")[0].src=`img/${index}.jpeg`;
    music.play();
    masterplay.classList.remove('fa-play')
    masterplay.classList.add('fa-pause')
    let titles=songs.filter((els)=>{
        return els.Id == index;
    })
    title.innerHTML=titles[0].song_name;
   
    makebackground();
    Array.from(document.getElementsByClassName("songitem"))[index-1].style.background = "rgb(118, 114, 114,.1";
    makeplayall();
    event.target.classList.remove("fa-circle-play")
    event.target.classList.add("fa-circle-pause")
    wave.classList.add("active1")
}

let music_random=function(){
index=Math.floor(Math.random()*songs.length)
music.src=`audio/${index}.mp3`;
document.getElementsByClassName("poster_master_play")[0].src=`img/${index}.jpeg`;
music.play();
masterplay.classList.remove('fa-play')
masterplay.classList.add('fa-pause')
let titles=songs.filter((els)=>{
    return els.Id == index;
})
title.innerHTML=titles[0].song_name;

makebackground();
Array.from(document.getElementsByClassName("songitem"))[index-1].style.background = "rgb(118, 114, 114,.1";
makeplayall();
event.target.classList.remove("fa-circle-play")
event.target.classList.add("fa-circle-pause")
wave.classList.add("active1")
}

let music_repeat=function(){

index=index;
music.src=`audio/${index}.mp3`;
document.getElementsByClassName("poster_master_play")[0].src=`img/${index}.jpeg`;
music.play();
masterplay.classList.remove('fa-play')
masterplay.classList.add('fa-pause')
let titles=songs.filter((els)=>{
    return els.Id == index;
})
title.innerHTML=titles[0].song_name;

makebackground();
Array.from(document.getElementsByClassName("songitem"))[index-1].style.background = "rgb(118, 114, 114,.1";
makeplayall();
event.target.classList.remove("fa-circle-play")
event.target.classList.add("fa-circle-pause")
wave.classList.add("active1")
}

music.addEventListener("ended",()=>{
    let a=suffle.textContent;
    switch (a) {
        case "next":
            music_next()
            break;
        case "random":
            music_random()
            break;
        case "repeat":
            music_repeat()
            break;
    }
})

// search bar
let search_result=document.getElementsByClassName("search_result")[0];
songs.forEach(element=>{
     const {Id,poster,song_name}=element;
     let card=document.createElement("a");
     card.classList.add("card")
     card.href="#" + Id ;
     card.innerHTML=`<img src="${poster}" alt="">                        
                            <h5>${song_name}</h5>`

    search_result.appendChild(card)    
})

let input=document.getElementsByTagName("input")[0];
input.addEventListener("keyup",()=>{
    let input_val=input.value.toUpperCase();
    let item=document.getElementsByTagName("a");
    
    for(let i=0;i<item.length ;i++){
        let h5=item[i].getElementsByTagName("h5");
        let item_val=h5[0].textContent;
        if(item_val.toUpperCase().indexOf(input_val)>-1){
            item[i].style.display="flex";

        }
        else{
            item[i].style.display="none";
        }

        if(input_val == 0){
            search_result.style.display="none";
        }
        else{
            search_result.style.display="";
        }

    }
    
})








let pop_song_left=document.getElementById("pop_song_left")
let pop_song_right=document.getElementById("pop_song_right")
let pop_song=document.getElementsByClassName('pop_song')[0];

pop_song_left.addEventListener("click",()=>{
    pop_song.scrollLeft += 200;
    pop_song.style.scrollBehaviour="smooth";
})


pop_song_right.addEventListener("click",()=>{
    pop_song.scrollLeft -= 200;
    pop_song.style.scrollBehaviour="smooth";
})

pop_song.addEventListener("wheel",(event)=>{
    
    pop_song.scrollLeft +=  event.deltaX;
    pop_song.style.scrollBehaviour="smooth";
   
})


let pop_art_left=document.getElementById("pop_art_left")
let pop_art_right=document.getElementById("pop_art_right")
let pop_art=document.getElementsByClassName('item')[0];

pop_art_left.addEventListener("click",()=>{
    pop_art.scrollLeft += 50;
    pop_art.style.scrollBehaviour="auto";
})


pop_art_right.addEventListener("click",()=>{
    pop_art.scrollLeft -= 50;
    pop_art.style.scrollBehaviour="auto";
})

pop_art.addEventListener("wheel",(event)=>{
    event.preventDefault();
    pop_art.scrollLeft += (event.deltaY || event.deltaX);
    pop_song.style.scrollBehaviour="auto";
   
})