JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
more comments
+17
-7
+12
-6
index.html
+12
-6
index.html
···
1
1
<!DOCTYPE html>
2
2
<html lang="en">
3
3
4
+
<!-- coded with love by des -->
5
+
4
6
<head>
5
7
<meta charset="UTF-8">
6
8
<link rel="icon" type="image/x-icon" href="files/favicon.gif">
···
17
19
<body>
18
20
<div id="music">
19
21
<div id="screen">
22
+
<!-- top bar info-->
20
23
<div id="top-bar">
21
24
<span id="current-screen">Music</span>
22
25
</div>
23
-
<div id="playlist" class="screen">
24
-
<!-- end of playlist screen -->
25
-
</div>
26
+
<!-- playlist screen -->
27
+
<div id="playlist" class="screen"></div>
28
+
<!-- song currently playing screen -->
26
29
<div id="current-song" class="screen">
27
30
<p class="info"><span class="icon"></span> <span id="song">song</span></p>
28
31
<img id="album" alt="album cover">
···
34
37
<p class="info"><span class="icon"></span> <span id="year">year</span></p>
35
38
<!-- end of current song screen -->
36
39
</div>
40
+
<!-- bottom bar -->
37
41
<div id="bottom-bar">
38
42
<input type="range" min="1" max="100" value="0" class="track-progress" onchange="seekTo()">
39
43
<span id="playing-status"></span>
···
44
48
</div>
45
49
<span id="battery"></span>
46
50
</div>
47
-
<!-- screen end div -->
48
51
</div>
49
52
<!-- grid controls -->
50
53
<div id="controls">
51
54
<button title="playlist screen" id="playlist-btn" onclick="showPlaylist()">menu</button>
52
55
<button class="up" title="search current song on youtube" onclick="youtubeSearch()"></button>
53
56
<button title="currently playing song screen" id="current-song-btn" onclick="showCurrentSong()">music</button>
54
-
<!-- --- -->
57
+
55
58
<button title="previous track" onclick="prevTrack()" id="left"></button>
56
59
<button onclick="playpauseTrack()" id="play-pause"></button>
57
60
<button title="next track" onclick="nextTrack()" class="right"></button>
58
-
<!-- --- -->
61
+
59
62
<span class="space"></span>
60
63
<button class="down"></button>
61
64
<span class="space"></span>
62
65
</div>
63
66
</div>
67
+
68
+
<!-- credit and resources -->
64
69
<p><a href="https://github.com/doqmeat/js-walkman-mp3-player">github repo</a> for info. <a href="https://ko-fi.com/s/df5738006f">ko-fi shop</a> for easy download.</p>
65
70
<p>built using sayantanm19's <a href="https://github.com/sayantanm19/js-music-player">js-music-player</a>, <a href="https://www.nerdfonts.com/" target="_blank">nerdfonts</a>, <a href="https://manos.malihu.gr/style-my-tooltips-jquery-plugin/" target="_blank">Style-my-tooltips jQuery plugin</a>.</p>
71
+
66
72
<script src="main.js"></script>
67
73
</body>
68
74
+4
main.js
+4
main.js