JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
finishedgit add .git add .
+164
-22
+16
-6
index.html
+16
-6
index.html
···
11
11
<body>
12
12
<div id="music">
13
13
<div id="screen">
14
-
<div id="details-screen">
14
+
<div id="top-bar">
15
+
<span id="current-screen">Music</span>
16
+
</div>
17
+
<div id="playlist" class="screen">
18
+
<!-- end of playlist screen -->
19
+
</div>
20
+
<div id="current-song" class="screen">
15
21
<p class="info"><span class="icon"></span> <span id="song">song</span></p>
16
22
<img id="album" alt="album cover">
17
23
<p id="now-playing">1/?</p>
18
24
<hr>
19
25
<p class="info"><span class="icon"></span> <span id="artist">artist</span></p>
20
26
<p class="info"><span class="icon"></span> <span id="album-title">album title</span></p>
21
-
<p class="info"><span class="icon"></span> <span id="genre">genre</span></p>
27
+
<p class="info"><span class="icon"></span> <span id="genre">genre</span></p>
22
28
<p class="info"><span class="icon"></span> <span id="year">year</span></p>
23
-
<!-- bottom bar -->
29
+
<!-- end of current song screen -->
24
30
</div>
25
-
<div id="bar">
31
+
<div id="bottom-bar">
26
32
<input type="range" min="1" max="100" value="0" class="track-progress" onchange="seekTo()">
27
33
<span id="playing-status"></span>
28
34
<span id="current-time">00:00</span>
35
+
<div id="current">
36
+
<span id="current-song-emoji"></span>
37
+
<span id="current-song-playing">song playing</span>
38
+
</div>
29
39
<span id="battery"></span>
30
40
</div>
31
41
<!-- screen end div -->
32
42
</div>
33
43
<!-- grid controls -->
34
44
<div id="controls">
35
-
<span class="space"></span>
45
+
<button id="playlist-btn" onclick="showPlaylist()">playlist</button>
36
46
<button id="up">▲</button>
37
-
<span class="space"></span>
47
+
<button id="current-song-btn" onclick="showCurrentSong()">music</button>
38
48
<!-- --- -->
39
49
<button onclick="prevTrack()" id="left">◄</button>
40
50
<button onclick="playpauseTrack()" id="play-pause"></button>
+56
-2
main.js
+56
-2
main.js
···
1
1
// tracks songs in playlist playing
2
2
let now_playing = document.querySelector("#now-playing");
3
3
4
-
// album cover img
4
+
// song info
5
5
let track_art = document.querySelector("#album");
6
6
let track_name = document.querySelector("#song");
7
7
let track_artist = document.querySelector("#artist");
···
12
12
let track_progress = document.querySelector(".track-progress");
13
13
let curr_time = document.querySelector("#current-time");
14
14
let playing_status = document.querySelector("#playing-status");
15
+
let current_song_playing = document.querySelector("#current-song-playing");
16
+
let current_song_div = document.querySelector("#current");
15
17
16
-
playing_status.textContent = "";
18
+
let top_bar = document.querySelector("#current-screen");
19
+
let currently_screen = document.querySelector("#current-song");
20
+
let playlist_screen = document.querySelector("#playlist");
17
21
18
22
let track_index = 0;
19
23
let isPlaying = false;
···
44
48
},
45
49
];
46
50
51
+
// playlist screen stays hidden on load
52
+
playlist_screen.style.display = "none";
53
+
current_song_div.style.display = "none";
54
+
55
+
function playlistMenu() {
56
+
for (i = 0; i < track_list.length; i++) {
57
+
playlist_screen.innerHTML +=
58
+
"<li onclick='playlistSelection(" +
59
+
i +
60
+
")'><img src='" +
61
+
track_list[i].image +
62
+
"' alt='album cover for" +
63
+
track_list[i].name +
64
+
"'><span>" +
65
+
track_list[i].name +
66
+
"</span></li>";
67
+
}
68
+
}
69
+
70
+
// loads playlist menu
71
+
playlistMenu();
72
+
73
+
function showPlaylist() {
74
+
top_bar.textContent = "Playlist";
75
+
currently_screen.style.display = "none";
76
+
playlist_screen.style.display = "block";
77
+
if (!isPlaying) current_song_div.style.display = "none";
78
+
else current_song_div.style.display = "inline";
79
+
curr_time.style.display = "none";
80
+
}
81
+
82
+
// playlist song selection
83
+
function playlistSelection(song_index) {
84
+
loadTrack(song_index);
85
+
playTrack();
86
+
showCurrentSong(); // shows currently playing screen
87
+
}
88
+
89
+
function showCurrentSong() {
90
+
top_bar.textContent = "Music";
91
+
currently_screen.style.display = "block";
92
+
playlist_screen.style.display = "none";
93
+
current_song_div.style.display = "none";
94
+
curr_time.style.display = "inline-block";
95
+
}
96
+
47
97
function loadTrack(track_index) {
48
98
clearInterval(updateTimer);
49
99
resetValues();
···
58
108
year.textContent = track_list[track_index].year;
59
109
60
110
now_playing.textContent = track_index + 1 + "/" + track_list.length;
111
+
112
+
// update current song name on bottom bar in playlist screen
113
+
current_song_playing.innerHTML =
114
+
"<marquee scrollamount='1'>" + track_list[track_index].name + "</marquee>";
61
115
62
116
updateTimer = setInterval(seekUpdate, 1000);
63
117
curr_track.addEventListener("ended", nextTrack);
+92
-14
style.css
+92
-14
style.css
···
51
51
grid-template-rows: 33% 33% 33%;
52
52
padding: 0px;
53
53
border-radius: 50%;
54
-
overflow: hidden;
55
54
}
56
55
57
56
/* buttons in controls CSS */
···
61
60
font-size: 13px;
62
61
background: inherit;
63
62
border: none;
63
+
border-radius: 50%;
64
64
color: #692222;
65
65
margin: 0px;
66
66
text-shadow: 2px -1px 2px rgba(225, 212, 212, 0.815);
67
+
}
68
+
69
+
button#playlist-btn,
70
+
button#current-song-btn {
71
+
position: relative;
72
+
border: 1px solid rgb(213, 213, 213);
73
+
background: #ba3f3f;
74
+
color: white;
75
+
font-size: 10px;
76
+
text-align: center;
77
+
border-radius: 50%;
78
+
z-index: 20;
67
79
}
68
80
69
81
button#play-pause {
···
84
96
border: 20px solid black;
85
97
border-top-width: 30px;
86
98
border-bottom-width: 30px;
87
-
font-size: 11px;
99
+
font-size: 10px;
88
100
letter-spacing: 1px;
89
101
line-height: 13px;
90
102
overflow: hidden;
···
92
104
scrollbar-color: rgb(173, 173, 173) transparent;
93
105
}
94
106
95
-
/* details box */
96
-
#details-screen {
107
+
/* screen class */
108
+
.screen {
97
109
position: relative;
98
-
overflow: scroll;
99
-
height: 88%;
110
+
overflow: auto;
111
+
height: 83.4%;
112
+
}
113
+
114
+
/* playlist songs */
115
+
#playlist li {
116
+
border: 1px solid transparent; /* this is here so it doesn't move when hovered */
117
+
}
118
+
119
+
#playlist li:hover {
120
+
cursor: pointer;
121
+
background: #fdaa03;
122
+
background: linear-gradient(
123
+
360deg,
124
+
rgba(253, 170, 3, 1) 0%,
125
+
rgba(255, 217, 140, 1) 91%
126
+
);
127
+
color: black;
128
+
border: 1px solid #f79501;
129
+
}
130
+
131
+
#playlist li span {
132
+
margin: 4px 4px;
133
+
display: inline-block;
134
+
vertical-align: middle;
135
+
width: 110px;
136
+
font-size: 10px;
137
+
line-height: 13px;
138
+
}
139
+
/* playlist screen track listing album cover */
140
+
#playlist li img {
141
+
display: inline-block;
142
+
vertical-align: middle;
143
+
line-height: 0px;
144
+
width: 30px;
145
+
border: 1px solid grey;
146
+
margin: 4px 4px;
100
147
}
101
148
102
149
/* music info */
···
120
167
margin-left: 40%;
121
168
}
122
169
170
+
#top-bar {
171
+
background: #454343;
172
+
background: linear-gradient(
173
+
360deg,
174
+
rgb(108, 108, 108) 0%,
175
+
rgb(71, 71, 71) 100%
176
+
);
177
+
width: 100%;
178
+
text-align: center;
179
+
font-size: 9px;
180
+
padding: 1px;
181
+
margin: 0px;
182
+
}
183
+
123
184
/* bottom bar */
124
-
#bar {
185
+
#bottom-bar {
125
186
background: #454343;
126
187
background: linear-gradient(
127
188
360deg,
···
132
193
font-size: 9px;
133
194
line-height: 0px;
134
195
padding: 0px;
135
-
margin: 0;
196
+
margin: 0px;
197
+
}
198
+
199
+
#bottom-bar #current {
200
+
display: inline;
201
+
}
202
+
203
+
/* current time of song */
204
+
#bottom-bar span {
205
+
display: inline-block;
206
+
padding: 7px;
207
+
}
208
+
209
+
span#current-song-emoji {
210
+
font-size: 10px;
211
+
padding-left: 0px;
212
+
padding-right: 0px;
213
+
}
214
+
215
+
span#current-song-playing {
216
+
display: inline-block;
217
+
padding: 0px;
218
+
width: 80px;
219
+
line-height: 10px;
136
220
}
137
221
138
222
/* playing status icon in the bar */
···
182
266
.track-progress::-moz-range-progress,
183
267
.track-progress::-webkit-slider-runnable-track {
184
268
background: rgb(96, 155, 226);
185
-
}
186
-
187
-
/* current time of song */
188
-
#current-time {
189
-
display: inline-block;
190
-
padding: 10px;
191
269
}
192
270
193
271
@font-face {