JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
finished version for firefox
+46
-12
+3
-3
main.js
+3
-3
main.js
···
26
26
// Create new audio element
27
27
let curr_track = document.createElement("audio");
28
28
29
-
// Define the tracks that have to be played
29
+
// add your playlist here!
30
30
let track_list = [
31
31
{
32
32
name: "Camel8strike",
···
64
64
function playlistMenu() {
65
65
for (i = 0; i < track_list.length; i++) {
66
66
playlist_screen.innerHTML +=
67
-
"<li onclick='playlistSelection(" +
67
+
"<button onclick='playlistSelection(" +
68
68
i +
69
69
")'><img src='" +
70
70
track_list[i].image +
···
72
72
track_list[i].name +
73
73
"'><span>" +
74
74
track_list[i].name +
75
-
"</span></li>";
75
+
"</span></button>";
76
76
}
77
77
}
78
78
+43
-9
style.css
+43
-9
style.css
···
56
56
/* buttons in controls CSS */
57
57
#controls button {
58
58
cursor: pointer;
59
-
font-family: inherit;
59
+
font-family: nerdfont, arial;
60
60
font-size: 13px;
61
61
background: inherit;
62
62
border: none;
···
117
117
}
118
118
119
119
/* playlist songs */
120
-
#playlist li {
120
+
#playlist button {
121
+
color: white;
122
+
text-align: left;
123
+
display: block;
124
+
width: 100%;
125
+
padding: 0px;
126
+
margin: 0px;
127
+
background: transparent;
128
+
font-family: inherit;
129
+
font-size: inherit;
121
130
border: 1px solid transparent; /* this is here so it doesn't move when hovered */
122
131
}
123
132
124
-
#playlist li:hover {
133
+
#playlist button:hover {
125
134
cursor: pointer;
126
135
background: #fdaa03;
127
136
background: linear-gradient(
···
133
142
border: 1px solid #f79501;
134
143
}
135
144
136
-
#playlist li span {
145
+
#playlist button span {
137
146
margin: 4px 4px;
138
147
display: inline-block;
139
148
vertical-align: middle;
140
-
width: 110px;
149
+
width: 70%;
141
150
font-size: 10px;
142
151
line-height: 13px;
143
152
}
144
153
145
154
/* playlist screen track listing album cover */
146
-
#playlist li img {
155
+
#playlist button img {
147
156
display: inline-block;
148
157
vertical-align: middle;
149
158
line-height: 0px;
···
202
211
margin: 0px;
203
212
}
204
213
214
+
/* current song playing in playlist screen */
205
215
#bottom-bar #current {
206
216
display: inline;
207
217
}
···
243
253
244
254
/* song progress bar */
245
255
.track-progress {
256
+
accent-color: rgb(96, 155, 226);
257
+
-webkit-appearance: none;
246
258
cursor: help;
247
259
width: 100%;
248
260
height: 4px;
···
258
270
}
259
271
260
272
/* song progress bar - thumb */
261
-
.track-progress::-webkit-slider-thumb,
273
+
/* chrome */
274
+
.track-progress::-webkit-slider-thumb {
275
+
-webkit-appearance: none;
276
+
appearance: none;
277
+
height: 4px;
278
+
width: 2px;
279
+
background: rgb(96, 155, 226);
280
+
cursor: pointer;
281
+
border: none;
282
+
border-radius: 0px;
283
+
}
284
+
285
+
/* firefox */
262
286
.track-progress::-moz-range-thumb {
263
287
height: 2.6px;
264
288
width: 2px;
···
269
293
}
270
294
271
295
/* song progress - bar progress */
272
-
.track-progress::-moz-range-progress,
273
-
.track-progress::-webkit-slider-runnable-track {
296
+
/* firefox */
297
+
.track-progress::-moz-range-progress {
274
298
background: rgb(96, 155, 226);
275
299
}
276
300
277
301
#s-m-t-tooltip {
278
302
background: rgb(0, 0, 0);
279
303
border-radius: 2px;
304
+
font-family: arial;
280
305
font-size: 11px;
281
306
color: rgb(238, 215, 215);
282
307
border: 1px solid rgb(6, 6, 6);
···
285
310
z-index: 9999;
286
311
margin: 30px 15px 7px 12px;
287
312
padding: 5px;
313
+
}
314
+
315
+
@keyframes marquee {
316
+
0% {
317
+
left: 0;
318
+
}
319
+
100% {
320
+
left: -100%;
321
+
}
288
322
}
289
323
290
324
@font-face {