-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
143 lines (143 loc) · 5.38 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
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
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Elle's MP3 Player</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheets/mp3-player.css">
</head>
<body>
<header class="header">
<div class="container">
<h1>Elle's MP3 Player</h1>
<p>Welcome to my MP3 player!<br />Hope you enjoy it :)</p>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col col-sm-12 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
<div class="audio-player">
<div id="cover-img" class="audio-player-cover"></div>
<div class="audio-player-progress">
<div class="row">
<div class="col col-sm-3">
<span id="duration" class="progress-duration">0:00</span>
</div>
<div class="col col-sm-6">
<div id="progress-bar" class="progress-bar">
<div class="progress-bar-inner">
<span id="progress" class="bar-current"></span>
</div>
</div>
</div>
<div class="col col-sm-3">
<span id="timeleft" class="progress-audio-length">00:00:00</span>
</div>
</div>
</div>
<div class="audio-player-body">
<div class="body-header body-section">
<h2 id="title"></h2>
<p id="album"></p>
<p id="artist"></p>
</div>
<div class="body-btns body-section">
<a id="prev-btn" class="btn prev" href="#">
<img src="images/icons/btn-previous.png" alt="Previous Butoon">
</a>
<a id="play-btn" class="btn play" href="#">
<img src="images/icons/btn-play.png" alt="Play Button">
</a>
<a id="pause-btn" class="btn pause" href="#">
<img src="images/icons/btn-pause.png" alt="Pause Button">
</a>
<a id="stop-btn" class="btn stop" href="#">
<img src="images/icons/btn-stop.png" alt="Stop Button">
</a>
<a id="next-btn" class="btn next" href="#">
<img src="images/icons/btn-next.png" alt="Next Button">
</a>
</div>
<form class="body-volume body-section">
<img src="images/icons/btn-volume.png" alt="">
<input id="volume-slider" type="range" min="0" max="10" value="4">
</form>
<ul id="playlist" class="body-playlist body-section">
<li song="three-little-birds.mp3"
cover="three-little-birds.jpg"
album="The Best Bob Marley & the Wailers"
artist="Bob Marley"
class="active">
Three Little Birds
</li>
<li song="prelude-in-c-minor.mp3"
cover="prelude-in-c-minor.jpg"
album="Chopin's Prelude"
artist="Chopin">
Prelude in C Minor
</li>
<li song="summer-sky.mp3"
cover="summer-sky.jpg"
album="DOVA 2017"
artist="GT-K">
Summer Sky
</li>
<li song="my-beach.mp3"
cover="my-beach.jpg"
album="DOVA 2017"
artist="MFP">
My Beach
</li>
<li song="water-moon.mp3"
cover="water-moon.jpg"
album="DOVA 2017"
artist="Yoshinori Tanaka">
Water Moon
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<h3>Thank you for playing!</h3>
<p>Say hi at <a href="mailto:ellekasai@gmail.com">elle.kasai@gmail.com</a> or follow me on:</p>
<ul class="footer-social-links">
<li>
<a href="//github.com/ellekasai/" target="_blank">
<i class="fa fa-github fa-2x" title="github"></i>
</a>
</li>
<li>
<a href="//www.linkedin.com/in/ellekasai" target="_blank">
<i class="fa fa-linkedin-square fa-2x" title="linkedin"></i>
</a>
</li>
<li>
<a href="//medium.com/@ellekasai" target="_blank">
<i class="fa fa-medium fa-2x" title="medium"></i>
</a>
</li>
<li>
<a href="//www.facebook.com/elle.kasai" target="_blank">
<i class="fa fa-facebook-official fa-2x" title="facebook"></i>
</a>
</li>
<li>
<a href="//www.youtube.com/channel/UCedPJBdXlrsJMAvV1TEwMFQ" target="_blank">
<i class="fa fa-youtube-square fa-2x" title="YouTube"></i>
</a>
</li>
</ul>
</div>
</footer>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="javascripts/mp3-player-min.js"></script>
</body>
</html>