-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (88 loc) · 3.65 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Best Of</title>
<link rel="stylesheet" href="style.css">
<link rel=icon href=favicon.ico>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="app.js"></script>
</head>
<body>
<div id="container"></div>
<section id="signup-form">
<div id="mc_embed_signup">
<form action="https://today.us13.list-manage.com/subscribe/post?u=93b41a1871734324d088abc68&id=4f8dd76e47" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group" id='signup-form'>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email">
<button id="btn">Subscribe</button>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_93b41a1871734324d088abc68_208637560c" tabindex="-1" value=""></div>
</div>
</form>
</div>
</section>
<script>
var elm = document.getElementById('container');
app = Elm.Main.embed(elm);
app.ports.play.subscribe(function(event) {
var audio = document.getElementById(event);
playSubscription(app, audio);
});
app.ports.pause.subscribe(function(event) {
removePlayingIdAttr();
var audio = document.getElementById(event);
pausePromise(audio, false);
});
app.ports.previous.subscribe(function(event) {
removePlayingIdAttr();
var audioStop = document.getElementById(event[0]);
pausePromise(audioStop, true);
var audioPlay = document.getElementById(event[1]);
playSubscription(app, audioPlay);
});
app.ports.next.subscribe(function(event) {
removePlayingIdAttr();
var audioStop = document.getElementById(event[0]);
pausePromise(audioStop, true);
var audioPlay = document.getElementById(event[1]);
playSubscription(app, audioPlay);
});
function playSubscription(app, el) {
document.title = el.name
el.play();
app.ports.setDuration.send(el.duration);
app.ports.setSongId.send(el.id);
app.ports.setSongName.send(el.name);
el.parentElement.setAttribute("id", "playing")
}
function pausePromise(el, beginning) {
if (el !== undefined) {
el.play().then(function() {
el.pause();
if (beginning) {
el.currentTime = 0;
}
}).catch(function(error) {
console.log('Error', error);
});
}
}
removePlayingIdAttr = function() {
var songs = document.getElementsByClassName("songs");
for (i = 0; i < songs.length; i++) {
songs[i].setAttribute("id", "");
}
}
</script>
</body>
</html>