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
|
const player = (function(){
let player = {}
let current_index = -1
let audio = document.createElement('audio')
let tracks = [
{ file: "mp3/xena_vectra-cruise.mp3", title: "Cruise" },
{ file: "mp3/xena_vectra-dreaming_city_2.mp3", title: "Dreaming City 2" },
{ file: "mp3/xena_vectra-escape_from_nk.mp3", title: "Escape from Neukölln" },
]
function init(){
bind()
build()
// play(0)
}
function bind(){
audio.addEventListener('play', handlePlay)
audio.addEventListener('pause', handlePause)
audio.addEventListener('ended', handleEnded)
document.querySelector('.player .icon').addEventListener('click', togglePlaying)
document.querySelector('.player .track').addEventListener('click', play)
document.querySelector('.player .playlistToggle').addEventListener('click', togglePlaylist)
}
function build() {
tracks.forEach((track, i) => {
let el = document.createElement('li')
el.innerHTML = track.title
el.addEventListener('click', () => {
if (is_mobile) {
hidePlaylist()
}
shards.rebuild()
play(i)
})
document.querySelector('.playlist ul').appendChild(el)
})
document.querySelector('.player .track').innerHTML = tracks[0].title
}
function play(n){
const active = document.querySelector('.playlist ul .active')
if (active) active.classList.remove('active')
document.querySelector('.playlist ul').children[n].classList.add('active')
current_index = (n + tracks.length) % tracks.length
audio.src = tracks[n].file
audio.play()
document.querySelector('.player .track').innerHTML = tracks[n].title
}
function handlePlay(){
document.querySelector('.player').classList.add('playing')
document.querySelector('.player').classList.remove('paused')
shards.step()
}
function handlePause(){
document.querySelector('.player').classList.remove('playing')
document.querySelector('.player').classList.add('paused')
}
function handleEnded(){
shards.rebuild()
play(current_index+1)
}
function togglePlaying() {
// sounds.play('click')
if (current_index == -1) {
play(0)
} else {
if (audio.paused) audio.play()
else audio.pause()
}
}
function togglePlaylist() {
site.navigateHash('')
document.querySelector('.playlist').classList.toggle('visible')
}
function hidePlaylist() {
document.querySelector('.playlist').classList.remove('visible')
}
init()
return { hidePlaylist }
})()
|
