Spotify-Clone/function3.js at main · Anupreet1213/Spotify-Clone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
let songIndex = 0;
let toggleBar = document.getElementById("toggleBar");
var allSongs = {
  music: ["Ajib Dastan - Lata", "Ye Vaada Raha - Kishore,Asha", "Ek Pyar Ka Nagma - Lata", "Pyar Diwana - Kishore", "O Mere Dil - Kishore"]
}
let audio = new Audio("Songs2/1.mp3");
let index = 0;

$("#mainButt").click(function(){
  if(audio.paused || audio.currentTime<=0){
    audio.play();
    $("#mainButt").removeClass("fa-regular fa-2x fa-circle-play");
    $("#mainButt").addClass("fa-regular fa-2x fa-circle-pause");
    $("#gif").css("opacity", "1");
  }
  else{
    audio.pause();
    $("#mainButt").removeClass("fa-regular fa-2x fa-circle-pause");
    $("#mainButt").addClass("fa-regular fa-2x fa-circle-play");
    $("#gif").css("opacity", "0");
  }
});

audio.addEventListener("timeupdate", ()=>{
  progress = parseInt((audio.currentTime/audio.duration)*100);
  toggleBar.value = progress;
  if(toggleBar.value==100){
    if(index>=5){
      index = 1;
    }
    else{
      index += 1;
    }
    audio.src = ("Songs2/"+(index)+".mp3");
    audio.play();
    document.getElementById("sideName").innerText = allSongs.music[index-1];
    animate = ("#" + index);
    $(animate).fadeIn(100).fadeOut(100).fadeIn(100);
  }
});

toggleBar.addEventListener("click",()=>{
  audio.currentTime = toggleBar.value * audio.duration/100;
});

Array.from(document.getElementsByClassName("songItem")).forEach((element)=>{
  element.addEventListener("click", (e)=>{
    index = parseInt(e.target.id);
    audio.src = ("Songs2/"+(index)+".mp3");
    document.getElementById("sideName").innerText = allSongs.music[index-1];
    audio.currentTime = 0;
    audio.play();
    $("#mainButt").removeClass("fa-regular fa-2x fa-circle-play");
    $("#mainButt").addClass("fa-regular fa-2x fa-circle-pause");
    $("#gif").css("opacity", "1");
    animate = ("#" + index);
    $(animate).fadeIn(100).fadeOut(100).fadeIn(100);
  });
});
$("#forw").click(()=>{
  if(index>=5){
    index = 1;
  }
  else{
    index += 1;
  }
  audio.src = ("Songs2/"+(index)+".mp3");
  audio.currentTime = 0;
  audio.play();
  $("#mainButt").removeClass("fa-regular fa-2x fa-circle-play");
  $("#mainButt").addClass("fa-regular fa-2x fa-circle-pause");
  animate = ("#" + index);
  $(animate).fadeIn(100).fadeOut(100).fadeIn(100);
  document.getElementById("sideName").innerText = allSongs.music[index-1];
});

$("#prev").click(()=>{
  if(index<=1){
    index = 1;
  }
  else{
    index -= 1;
  }
  audio.src = ("Songs2/"+(index)+".mp3");
  audio.currentTime = 0;
  audio.play();
  $("#mainButt").removeClass("fa-regular fa-2x fa-circle-play");
  $("#mainButt").addClass("fa-regular fa-2x fa-circle-pause");
  animate = ("#" + index);
  $(animate).fadeIn(100).fadeOut(100).fadeIn(100);
  document.getElementById("sideName").innerText = allSongs.music[index-1];
});