JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
minor changes
+28
-7
+4
-3
index.html
+4
-3
index.html
···
17
17
</head>
18
18
19
19
<body>
20
-
<div id="music">
20
+
<div id="walkman-mp3-player">
21
21
<div id="screen">
22
22
<!-- top bar info-->
23
23
<div id="top-bar">
···
66
66
</div>
67
67
68
68
<!-- credit and resources -->
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>
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>
69
+
<!-- you can remove this -->
70
+
<p><a href="https://github.com/doqmeat/js-walkman-mp3-player">github repo</a> for info. <a href="https://vgen.co/doqmeat/product/js-walkman-mp3-player/6c9efad3-53ae-462e-8b70-5cc67b933a05" target="_blank">vgen shop</a> for easy download.</p>
71
+
<p>built using sayantanm19's <a href="https://github.com/sayantanm19/js-music-player" target="_blank">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
72
72
73
<script src="main.js"></script>
73
74
</body>
+6
-3
main.js
+6
-3
main.js
···
1
1
/*
2
-
using this for the music player: https://github.com/sayantanm19/js-music-player
2
+
built with https://github.com/sayantanm19/js-music-player
3
+
edited by doqmeat for js walkman mp3 player
3
4
*/
4
5
5
6
// song info
···
212
213
213
214
let currentMinutes = Math.floor(curr_track.currentTime / 60);
214
215
let currentSeconds = Math.floor(
215
-
curr_track.currentTime - currentMinutes * 60
216
+
curr_track.currentTime - currentMinutes * 60,
216
217
);
217
218
let durationMinutes = Math.floor(curr_track.duration / 60);
218
219
let durationSeconds = Math.floor(
219
-
curr_track.duration - durationMinutes * 60
220
+
curr_track.duration - durationMinutes * 60,
220
221
);
221
222
222
223
if (currentSeconds < 10) {
···
245
246
track_list[track_index].artist;
246
247
window.open(searchString, "_blank");
247
248
}
249
+
250
+
// console.table(track_list[track_index].name);
+18
-1
style.css
+18
-1
style.css
···
1
1
/* mp3 player wrapper. everything is nested in here just to be extra careful and not mess with other elements you might have */
2
-
#music {
2
+
#walkman-mp3-player {
3
3
box-sizing: border-box;
4
4
position: relative;
5
5
font-family: arial, nerdfont;
···
324
324
font-family: "nerdfont";
325
325
src: url(files/symbolsnerdfont.ttf);
326
326
}
327
+
328
+
/* you can remove these, they are so the whole page looks nicer */
329
+
330
+
body {
331
+
font-family: ms pgothic;
332
+
background: linear-gradient(
333
+
204deg,
334
+
rgb(239, 161, 161) 0%,
335
+
rgba(255, 227, 179, 1) 100%
336
+
);
337
+
margin: 50px;
338
+
height: 100vh;
339
+
font-size: 18px;
340
+
a {
341
+
color: rgb(68, 68, 186);
342
+
}
343
+
}