JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
updates around code, more comments
+107
-76
+7
-2
README.md
+7
-2
README.md
···
1
1
# JS walkman mp3 player
2
2
3
-
a functional JS music player with the looks of one of those sony walkman mp3 players from around 2008.
3
+
a JS music player with the looks of one of those sony walkman mp3 players from around 2008.
4
+
5
+
## features
6
+
7
+
- playlist screen selection
8
+
- search current song on youtube
4
9
5
10
6
11
···
16
21
### to-do's / ideas
17
22
18
23
- [x] screen for playlist menu
19
-
- [ ] make time blink when song is paused
24
+
- [ ] make time blink when song is paused in currently playing screen
20
25
- [x] screen for currently playing song
files/favicon.gif
files/favicon.gif
This is a binary file and will not be displayed.
+6
-5
index.html
+6
-5
index.html
···
3
3
4
4
<head>
5
5
<meta charset="UTF-8">
6
+
<link rel="icon" type="image/x-icon" href="files/favicon.gif">
6
7
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8
<title>JS walkman mp3 player</title>
8
9
<!-- body stylesheet -->
···
39
40
<span id="current-time">00:00</span>
40
41
<div id="current">
41
42
<span id="current-song-emoji"></span>
42
-
<span id="current-song-playing">song playing</span>
43
+
<span id="current-song-playing">current song playing</span>
43
44
</div>
44
45
<span id="battery"></span>
45
46
</div>
···
48
49
<!-- grid controls -->
49
50
<div id="controls">
50
51
<button title="playlist screen" id="playlist-btn" onclick="showPlaylist()">menu</button>
51
-
<button class="up">▲</button>
52
+
<button class="up" title="search current song on youtube" onclick="youtubeSearch()"></button>
52
53
<button title="currently playing song screen" id="current-song-btn" onclick="showCurrentSong()">music</button>
53
54
<!-- --- -->
54
-
<button title="previous track" onclick="prevTrack()" id="left">◄</button>
55
+
<button title="previous track" onclick="prevTrack()" id="left"></button>
55
56
<button onclick="playpauseTrack()" id="play-pause"></button>
56
-
<button title="next track" onclick="nextTrack()" class="right">►</button>
57
+
<button title="next track" onclick="nextTrack()" class="right"></button>
57
58
<!-- --- -->
58
59
<span class="space"></span>
59
-
<button class="down">▼</button>
60
+
<button class="down"></button>
60
61
<span class="space"></span>
61
62
</div>
62
63
</div>
+69
-42
main.js
+69
-42
main.js
···
1
-
// tracks songs in playlist playing
2
-
let now_playing = document.querySelector("#now-playing");
3
-
4
1
// song info
5
-
let track_art = document.querySelector("#album");
6
2
let track_name = document.querySelector("#song");
7
3
let track_artist = document.querySelector("#artist");
8
4
let album_title = document.querySelector("#album-title");
5
+
let album_cover = document.querySelector("#album");
9
6
let genre = document.querySelector("#genre");
10
7
let year = document.querySelector("#year");
11
8
12
-
let track_progress = document.querySelector(".track-progress");
13
-
let curr_time = document.querySelector("#current-time");
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");
9
+
// currently playing screen
10
+
let track_progress = document.querySelector(".track-progress"); // blue progress slider
11
+
let curr_time = document.querySelector("#current-time"); // 00:00
12
+
let playing_status = document.querySelector("#playing-status"); // or
13
+
let now_playing = document.querySelector("#now-playing"); // 1/? tracks
17
14
15
+
// playlist screen
16
+
let current_song_playing = document.querySelector("#current-song-playing"); // current song name scrolling
17
+
let current_song_div = document.querySelector("#current"); // targets the div of current song playing
18
+
19
+
// screens
18
20
let top_bar = document.querySelector("#current-screen");
19
21
let currently_screen = document.querySelector("#current-song");
20
22
let playlist_screen = document.querySelector("#playlist");
···
31
33
{
32
34
name: "Camel8strike",
33
35
artist: "Asian Glow",
34
-
album: "11100011",
36
+
album: "11100011", // name of album
35
37
genre: "Shoegaze",
36
-
year: "2025",
38
+
year: "2025", // year song was released
37
39
image: "files/11100011.jpeg", // album cover path
38
40
path: "https://files.catbox.moe/jfmagx.mp3", // mp3 audio path
39
41
},
···
61
63
playlist_screen.style.display = "none";
62
64
current_song_div.style.display = "none";
63
65
66
+
// use : creates the song listings for playlist screen
64
67
function playlistMenu() {
65
68
for (i = 0; i < track_list.length; i++) {
66
69
playlist_screen.innerHTML +=
···
76
79
}
77
80
}
78
81
79
-
// loads playlist menu
82
+
// loads playlist menu once
80
83
playlistMenu();
81
84
82
-
function showPlaylist() {
83
-
top_bar.textContent = "Playlist";
84
-
currently_screen.style.display = "none";
85
-
playlist_screen.style.display = "block";
86
-
if (!isPlaying) current_song_div.style.display = "none";
87
-
else current_song_div.style.display = "inline";
88
-
curr_time.style.display = "none";
89
-
}
90
-
91
-
// playlist song selection
92
-
function playlistSelection(song_index) {
93
-
loadTrack(song_index);
94
-
playTrack();
95
-
showCurrentSong(); // shows currently playing screen
96
-
}
97
-
98
-
function showCurrentSong() {
99
-
top_bar.textContent = "Music";
100
-
currently_screen.style.display = "block";
101
-
playlist_screen.style.display = "none";
102
-
current_song_div.style.display = "none";
103
-
curr_time.style.display = "inline-block";
104
-
}
105
-
106
85
function loadTrack(index) {
107
-
track_index = index;
86
+
track_index = index; // stores current index
87
+
108
88
clearInterval(updateTimer);
109
-
resetValues();
89
+
resetValues(); // resets song progress
110
90
curr_track.src = track_list[index].path;
111
91
curr_track.load();
112
92
113
-
track_art.src = track_list[index].image;
93
+
album_cover.src = track_list[index].image;
114
94
track_name.textContent = track_list[index].name;
115
95
track_artist.textContent = track_list[index].artist;
116
96
album_title.textContent = track_list[index].album;
···
124
104
"<marquee scrollamount='3'>" + track_list[index].name + "</marquee>";
125
105
126
106
updateTimer = setInterval(seekUpdate, 1000);
107
+
108
+
// jumps to next track once it ends
127
109
curr_track.addEventListener("ended", nextTrack);
128
110
}
129
111
···
135
117
// Load the first track in the tracklist
136
118
loadTrack(track_index);
137
119
120
+
// use : shows the playlist screen
121
+
function showPlaylist() {
122
+
top_bar.textContent = "Playlist";
123
+
currently_screen.style.display = "none"; // hides currently playing
124
+
playlist_screen.style.display = "block"; // shows playlist
125
+
// shows current song playing if there is one playing
126
+
if (!isPlaying) current_song_div.style.display = "none";
127
+
else current_song_div.style.display = "inline";
128
+
curr_time.style.display = "none"; // hides bottom bar timer
129
+
}
130
+
131
+
// input : selected song index
132
+
// use : plays selected song and shows currently playing screen
133
+
function playlistSelection(index) {
134
+
loadTrack(index);
135
+
playTrack();
136
+
current_song_div.style.display = "inline"; // current song playing shows
137
+
}
138
+
139
+
// use: shows the current playing song screen
140
+
function showCurrentSong() {
141
+
top_bar.textContent = "Music";
142
+
currently_screen.style.display = "block";
143
+
playlist_screen.style.display = "none";
144
+
current_song_div.style.display = "none";
145
+
curr_time.style.display = "inline-block";
146
+
}
147
+
138
148
// play-pause button fuction on click
139
149
function playpauseTrack() {
140
150
if (!isPlaying) playTrack();
141
151
else pauseTrack();
142
152
}
143
153
144
-
// when playing a track
154
+
// use : when track is playing
145
155
function playTrack() {
146
156
curr_track.play();
147
157
isPlaying = true;
148
158
playing_status.textContent = "";
149
159
playing_status.style.color = "rgb(35, 236, 35)";
150
-
showCurrentSong();
160
+
// shows current song playing if the playlist screen is showing
161
+
if (playlist_screen.style.display == "block")
162
+
current_song_div.style.display = "inline";
151
163
}
152
164
153
-
// when track is paused
165
+
// use : when track is paused
154
166
function pauseTrack() {
155
167
curr_track.pause();
156
168
isPlaying = false;
157
169
playing_status.textContent = "";
158
170
playing_status.style.color = "rgb(217, 217, 217)";
171
+
current_song_div.style.display = "none"; // always hides current song playing
159
172
}
160
173
174
+
// use : skips to next track
161
175
function nextTrack() {
162
176
if (track_index < track_list.length - 1) track_index++;
163
177
else track_index = 0;
···
165
179
playTrack();
166
180
}
167
181
182
+
// use : skips to prev track
168
183
function prevTrack() {
169
184
// check if its the first track in playlist
170
185
if (track_index > 0) track_index--;
···
174
189
playTrack();
175
190
}
176
191
192
+
// use : song progress slider function
177
193
function seekTo() {
178
194
let seekto = curr_track.duration * (track_progress.value / 100);
179
195
curr_track.currentTime = seekto;
180
196
}
181
197
198
+
// use : updates current timer
182
199
function seekUpdate() {
183
200
let seekPosition = 0;
184
201
···
212
229
curr_time.textContent = currentMinutes + ":" + currentSeconds;
213
230
}
214
231
}
232
+
233
+
// use : searched the current song playing on youtube
234
+
function youtubeSearch() {
235
+
let searchString =
236
+
"https://www.youtube.com/results?search_query=" +
237
+
track_list[track_index].name +
238
+
"+" +
239
+
track_list[track_index].artist;
240
+
window.open(searchString, "_blank");
241
+
}
+25
-27
style.css
+25
-27
style.css
···
35
35
margin: 0 0 0 5px;
36
36
}
37
37
38
+
/* 1/? tracks playing */
39
+
#now-playing {
40
+
display: inline-block;
41
+
position: absolute;
42
+
float: right;
43
+
margin-top: 30%;
44
+
margin-left: 40%;
45
+
}
46
+
47
+
/* line below album cover */
38
48
hr {
39
49
margin: 1px 0px;
40
50
padding: 0px;
···
69
79
text-shadow: 2px -1px 2px rgba(225, 212, 212, 0.815);
70
80
}
71
81
72
-
#controls button.down,
73
-
#controls button.up {
82
+
/* since these buttons don't do anything, they have a 'blocked' cursor */
83
+
#controls button.down {
74
84
cursor: not-allowed;
75
85
}
76
86
87
+
/* the two mini curcle buttons */
77
88
button#playlist-btn,
78
89
button#current-song-btn {
79
90
position: relative;
···
86
97
z-index: 20;
87
98
}
88
99
100
+
/* play pause button */
89
101
button#play-pause {
90
102
color: white;
91
103
border: 1px solid rgb(39, 11, 11);
···
112
124
scrollbar-color: rgb(173, 173, 173) transparent;
113
125
}
114
126
115
-
/* screen class */
127
+
/* screen class (for playlist and currently playing song)*/
116
128
.screen {
117
129
position: relative;
118
130
overflow: auto;
119
131
height: 83.4%;
120
132
}
121
133
122
-
/* playlist songs */
134
+
/* playlist songs listing */
123
135
#playlist button {
124
136
color: white;
125
137
text-align: left;
···
145
157
border: 1px solid #f79501;
146
158
}
147
159
160
+
/* button text */
148
161
#playlist button span {
149
162
margin: 4px 4px;
150
163
display: inline-block;
···
154
167
line-height: 13px;
155
168
}
156
169
157
-
/* playlist screen track listing album cover */
170
+
/* button album cover */
158
171
#playlist button img {
159
172
display: inline-block;
160
173
vertical-align: middle;
···
164
177
margin: 4px 4px;
165
178
}
166
179
167
-
/* music info */
180
+
/* currently playing screen music info */
168
181
p.info {
169
182
margin: 4px 4px;
170
183
padding: 0;
171
184
}
172
185
173
-
/* music info icons */
186
+
/* icons */
174
187
.icon {
175
188
color: rgb(173, 174, 176);
176
189
font-size: 12px;
177
190
}
178
191
179
-
/* 1/? tracks playing */
180
-
#now-playing {
181
-
display: inline-block;
182
-
position: absolute;
183
-
float: right;
184
-
margin-top: 30%;
185
-
margin-left: 40%;
186
-
}
187
-
188
192
#top-bar {
189
193
background: #454343;
190
194
background: linear-gradient(
···
199
203
margin: 0px;
200
204
}
201
205
202
-
/* bottom bar */
203
206
#bottom-bar {
204
207
background: #454343;
205
208
background: linear-gradient(
···
225
228
padding: 7px;
226
229
}
227
230
231
+
/* emoji that a song is playing */
228
232
span#current-song-emoji {
229
233
font-size: 10px;
230
234
padding-left: 0px;
231
235
padding-right: 0px;
232
236
}
233
237
238
+
/* scrolling name of current song playing */
234
239
span#current-song-playing {
235
240
display: inline-block;
236
241
padding: 0px;
···
296
301
}
297
302
298
303
/* song progress - bar progress */
299
-
/* firefox */
304
+
/* only on firefox */
300
305
.track-progress::-moz-range-progress {
301
306
background: rgb(96, 155, 226);
302
307
}
303
308
309
+
/* tooltip custom css */
304
310
#s-m-t-tooltip {
305
311
background: rgb(0, 0, 0);
306
312
border-radius: 2px;
···
315
321
padding: 5px;
316
322
}
317
323
318
-
@keyframes marquee {
319
-
0% {
320
-
left: 0;
321
-
}
322
-
100% {
323
-
left: -100%;
324
-
}
325
-
}
326
-
324
+
/* nerdfonts */
327
325
@font-face {
328
326
font-family: "nerdfont";
329
327
src: url(files/symbolsnerdfont.ttf);