SpotifyProject/script.js at master · algo-maniac/SpotifyProject · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
console.log('Hello');
let audioElement = new Audio('/songs/1.mp3');
let masterPlay = document.getElementById('masterPlay');
let previous = document.getElementById('previous');
let next = document.getElementById('next');
let gif = document.getElementById('gif');
let playbar = document.getElementById('playbar');
let songitem = Array.from(document.getElementsByClassName('songitem'));

let playicons = document.getElementsByClassName('playicons');
let array = Array.from(playicons);

//Songs array containing names and paths

let songs = [
    { Name: "It's Always Blue", songpath: "/songs/1.mp3" },
    { Name: "Trap", songpath: "/songs/2.mp3" },
    { Name: "They Mad", songpath: "/songs/3.mp3" },
    { Name: "Plug Walk", songpath: "/songs/4.mp3" },
    { Name: "Heroes Tonight", songpath: "/songs/5.mp3" },
    { Name: "Heroes Tonight(Instrumental)", songpath: "/songs/6.mp3" },
    { Name: "Back It Up", songpath: "/songs/7.mp3" },

];


// Events to play the song at the seakbar


masterPlay.addEventListener('click', () => {
    if (audioElement.paused || audioElement.currentTime <= 0) {
        audioElement.play();
        masterPlay.classList.remove('fa-play-circle');
        masterPlay.classList.add('fa-pause-circle');
        gif.style.opacity = 1;
    }
    else {
        audioElement.pause();
        masterPlay.classList.remove('fa-pause-circle');
        masterPlay.classList.add('fa-play-circle');
        gif.style.opacity = 0;
    }
})


//Calculating and Creating the progress of the seakbar

audioElement.addEventListener('timeupdate', () => {
    let progress = parseInt(audioElement.currentTime / audioElement.duration * 100);
    playbar.value = progress;
})

playbar.addEventListener('change', () => {
    audioElement.currentTime = playbar.value * audioElement.duration / 100;
})


//Initialize all the pause buttons with play buttons

let songIndex = 0;
const makeAllPlays = () => {
    Array.from(document.getElementsByClassName('playicons')).forEach((element) => {
        element.classList.remove('fa-pause-circle');
        element.classList.add('fa-play-circle');
    })
}


//Playing each song from the song list


array.forEach((element) => {
    element.addEventListener('click', (e) => {
        makeAllPlays();
        songIndex = parseInt(e.target.id);
        e.target.classList.remove('fa-play-circle');
        e.target.classList.add('fa-pause-circle');
        audioElement.src = `songs/${songIndex}.mp3`;
        audioElement.currentTime = 0;
        audioElement.play();
        gif.style.opacity = 1;
        masterPlay.classList.remove('fa-play-circle');
        masterPlay.classList.add('fa-pause-circle');
        let SongName = document.getElementById('SongName');
        SongName.innerText = songs[songIndex - 1].Name;
    })

})


// Creating next and previous songs from the list


previous.addEventListener('click', (e) => {
    if (songIndex == 1) {
        songIndex = 7;
    }
    else {
        songIndex--;
    }
    makeAllPlays();
    let element = array[songIndex - 1];
    element.classList.remove('fa-play-circle');
    element.classList.add('fa-pause-circle');
    // e.target.classList.remove('fa-play-circle');
    // e.target.classList.add('fa-pause-circle');
    audioElement.src = `songs/${songIndex}.mp3`;
    audioElement.currentTime = 0;
    audioElement.play();
    gif.style.opacity = 1;
    masterPlay.classList.remove('fa-play-circle');
    masterPlay.classList.add('fa-pause-circle');
    let SongName = document.getElementById('SongName');
    SongName.innerText = songs[songIndex - 1].Name;

})

next.addEventListener('click', (e) => {
    if (songIndex == 7) {
        songIndex = 1;
    }
    else {
        songIndex++;
    }
    makeAllPlays();
    let element = array[songIndex - 1];
    element.classList.remove('fa-play-circle');
    element.classList.add('fa-pause-circle');
    audioElement.src = `songs/${songIndex}.mp3`;
    audioElement.currentTime = 0;
    audioElement.play();
    gif.style.opacity = 1;
    masterPlay.classList.remove('fa-play-circle');
    masterPlay.classList.add('fa-pause-circle');
    let SongName = document.getElementById('SongName');
    SongName.innerText = songs[songIndex - 1].Name;

})