PersonalApp/app.js at master · Hannahhiendo/PersonalApp · 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
const background = document.getElementById('Background')
const thumbnail = document.getElementById('Thumbnail')
const Song = document.getElementById('Song')

const songartist = document.getElementById('song-artist')
const songtitle = document.getElementById('song-title')

const rangeslider = document.getElementById('range-slider')
const playPause = document.getElementById('Play-Pause')


const nextBtn = document.getElementById('Next')
const previousBtn = document.getElementById('Previous')

nextBtn.onclick = nextSong

previousBtn.onclick = previousSong


let artists = [
    'Harry styles',
    'Bts'
]

let titles = [
    'Watermelon Sugar',
    'Dynamite'
]
let songs = [
    './Assets/music/Watermelon Sugar - Harry Styles.mp3',
    './Assets/music/Dynamite - BTS.mp3'
]
let covers = [
    './Assets/cover/Fine Line album.jpg',
    './Assets/cover/dynamite.jpeg'
]

let playing = true

function PlayPauseFunc() {
    if(playing){
        playPause.src = './Assets/icon/pause.png'
        Song.play()
    }
    else{
        playPause.src = './Assets/icon/play-button.png'
        Song.pause()
    }
    playing = !playing
}

let songIndex = 0

function nextSong(){

    console.log('in next')

    songIndex++;
    if(songIndex >= songs.length){
        songIndex = 0;

    }
    Song.src = songs[songIndex]
    Thumbnail.src = covers[songIndex]
    Background.src = covers[songIndex]

    document.getElementById('song-artist').innerHTML = artists[songIndex]
    document.getElementById('song-title').innerHTML = titles[songIndex]


    playing = true
    PlayPauseFunc()

}

function previousSong(){

    console.log('in previous')
    songIndex--;
    if(songIndex <= 0){
        songIndex = 0;
    }

    Song.src = songs[songIndex]
    Thumbnail.src = covers[songIndex]
    Background.src = covers[songIndex]

    document.getElementById('song-artist').innerHTML = artists[songIndex]
    document.getElementById('song-title').innerHTML = titles[songIndex]


    playing = true
    PlayPauseFunc()
}

function formatTime(seconds) {
    let minutes = Math.floor(seconds/60)
    seconds = seconds % 60
    if (seconds < 10){
        seconds = `0${seconds}`
    }
    return `${minutes}:${seconds}`
}

rangeslider.onchange = () => {
    Song.currentTime = rangeslider.value
}

function updateProgressValue() {
    rangeslider.max = Song.duration
    rangeslider.value = Song.currentTime

    document.querySelector('.currenttime').innerHTML = formatTime(Math.floor(Song.currentTime))

    if (document.querySelector('.durationtime').innerHTML == "NaN:NaN"){
        document.querySelector('.durationtime').innerHTML = '0:00'
    }
    else {
        document.querySelector('.durationtime').innerHTML = formatTime(Math.floor(Song.duration))

    }
}

setInterval(updateProgressValue, 500);