JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
1/*
2built with https://github.com/sayantanm19/js-music-player
3edited by doqmeat for js walkman mp3 player
4*/
5
6// song info
7let track_name = document.querySelector("#song");
8let track_artist = document.querySelector("#artist");
9let album_title = document.querySelector("#album-title");
10let album_cover = document.querySelector("#album");
11let genre = document.querySelector("#genre");
12let year = document.querySelector("#year");
13
14// currently playing screen
15let track_progress = document.querySelector(".track-progress"); // blue progress slider
16let curr_time = document.querySelector("#current-time"); // 00:00
17let playing_status = document.querySelector("#playing-status"); // or
18let now_playing = document.querySelector("#now-playing"); // 1/? tracks
19
20// playlist screen
21let current_song_playing = document.querySelector("#current-song-playing"); // current song name scrolling
22let current_song_div = document.querySelector("#current"); // targets the div of current song playing
23
24// screens
25let top_bar = document.querySelector("#current-screen");
26let currently_screen = document.querySelector("#current-song");
27let playlist_screen = document.querySelector("#playlist");
28
29let track_index = 0;
30let isPlaying = false;
31let updateTimer;
32
33// Create new audio element
34let curr_track = document.createElement("audio");
35
36// add your playlist here!
37let track_list = [
38 {
39 name: "Camel8strike",
40 artist: "Asian Glow",
41 album: "11100011", // name of album
42 genre: "Shoegaze",
43 year: "2025", // year song was released
44 image: "files/11100011.jpeg", // album cover path
45 path: "https://files.catbox.moe/jfmagx.mp3", // mp3 audio path
46 },
47 {
48 name: "Cyber Space 2-1: Slice & Sway",
49 artist: "SEGA SOUND TEAM",
50 album: "Sonic Frontiers Original Soundtrack Stillness & Motion",
51 genre: "Drum n Bass",
52 year: "2022",
53 image: "files/sonic-frontiers-ost.jpg",
54 path: "https://files.catbox.moe/rgotfj.mp3",
55 },
56 {
57 name: "溢れてる",
58 artist: "kinoue64",
59 album: "あなただけに聴いてほしい",
60 genre: "Rock",
61 year: "2023",
62 image: "files/kinoue64-album1.jpg",
63 path: "https://files.catbox.moe/6gbrjt.mp3",
64 },
65];
66
67// playlist screen stays hidden on load
68playlist_screen.style.display = "none";
69current_song_div.style.display = "none";
70
71// use : creates the song listings for playlist screen
72function playlistMenu() {
73 for (i = 0; i < track_list.length; i++) {
74 playlist_screen.innerHTML +=
75 "<button onclick='playlistSelection(" +
76 i +
77 ")'><img src='" +
78 track_list[i].image +
79 "' alt='album cover for" +
80 track_list[i].name +
81 "'><span>" +
82 track_list[i].name +
83 "</span></button>";
84 }
85}
86
87// loads playlist menu once
88playlistMenu();
89
90function loadTrack(index) {
91 track_index = index; // stores current index
92
93 clearInterval(updateTimer);
94 resetValues(); // resets song progress
95 curr_track.src = track_list[index].path;
96 curr_track.load();
97
98 album_cover.src = track_list[index].image;
99 track_name.textContent = track_list[index].name;
100 track_artist.textContent = track_list[index].artist;
101 album_title.textContent = track_list[index].album;
102 genre.textContent = track_list[index].genre;
103 year.textContent = track_list[index].year;
104
105 now_playing.textContent = index + 1 + "/" + track_list.length;
106
107 // update current song name on bottom bar in playlist screen
108 current_song_playing.innerHTML =
109 "<marquee direction='left' scrollamount='3' behavior='scroll'>" +
110 track_list[index].name +
111 "</marquee>";
112
113 updateTimer = setInterval(seekUpdate, 1000);
114
115 // jumps to next track once it ends
116 curr_track.addEventListener("ended", nextTrack);
117}
118
119function resetValues() {
120 curr_time.textContent = "00:00";
121 track_progress.value = 0;
122}
123
124// Load the first track in the tracklist
125loadTrack(track_index);
126
127// use : shows the playlist screen
128function showPlaylist() {
129 top_bar.textContent = "Playlist";
130 currently_screen.style.display = "none"; // hides currently playing
131 playlist_screen.style.display = "block"; // shows playlist
132 // shows current song playing if there is one playing
133 if (!isPlaying) current_song_div.style.display = "none";
134 else current_song_div.style.display = "inline";
135 curr_time.style.display = "none"; // hides bottom bar timer
136}
137
138// input : selected song index
139// use : plays selected song and shows currently playing screen
140function playlistSelection(index) {
141 loadTrack(index);
142 playTrack();
143 current_song_div.style.display = "inline"; // current song playing shows
144}
145
146// use: shows the current playing song screen
147function showCurrentSong() {
148 top_bar.textContent = "Music";
149 currently_screen.style.display = "block";
150 playlist_screen.style.display = "none";
151 current_song_div.style.display = "none";
152 curr_time.style.display = "inline-block";
153}
154
155// play-pause button fuction on click
156function playpauseTrack() {
157 if (!isPlaying) playTrack();
158 else pauseTrack();
159}
160
161// use : when track is playing
162function playTrack() {
163 curr_track.play();
164 isPlaying = true;
165 playing_status.textContent = "";
166 playing_status.style.color = "rgb(35, 236, 35)";
167 // shows current song playing if the playlist screen is showing
168 if (playlist_screen.style.display == "block")
169 current_song_div.style.display = "inline";
170}
171
172// use : when track is paused
173function pauseTrack() {
174 curr_track.pause();
175 isPlaying = false;
176 playing_status.textContent = "";
177 playing_status.style.color = "rgb(217, 217, 217)";
178 current_song_div.style.display = "none"; // always hides current song playing
179}
180
181// use : skips to next track
182function nextTrack() {
183 if (track_index < track_list.length - 1) track_index++;
184 else track_index = 0;
185 loadTrack(track_index);
186 playTrack();
187}
188
189// use : skips to prev track
190function prevTrack() {
191 // check if its the first track in playlist
192 if (track_index > 0) track_index--;
193 // if not, it updates to the index of the last track
194 else track_index = track_list.length - 1;
195 loadTrack(track_index);
196 playTrack();
197}
198
199// use : song progress slider function
200function seekTo() {
201 let seekto = curr_track.duration * (track_progress.value / 100);
202 curr_track.currentTime = seekto;
203}
204
205// use : updates current timer
206function seekUpdate() {
207 let seekPosition = 0;
208
209 if (!isNaN(curr_track.duration)) {
210 seekPosition = curr_track.currentTime * (100 / curr_track.duration);
211
212 track_progress.value = seekPosition;
213
214 let currentMinutes = Math.floor(curr_track.currentTime / 60);
215 let currentSeconds = Math.floor(
216 curr_track.currentTime - currentMinutes * 60,
217 );
218 let durationMinutes = Math.floor(curr_track.duration / 60);
219 let durationSeconds = Math.floor(
220 curr_track.duration - durationMinutes * 60,
221 );
222
223 if (currentSeconds < 10) {
224 currentSeconds = "0" + currentSeconds;
225 }
226 if (durationSeconds < 10) {
227 durationSeconds = "0" + durationSeconds;
228 }
229 if (currentMinutes < 10) {
230 currentMinutes = "0" + currentMinutes;
231 }
232 if (durationMinutes < 10) {
233 durationMinutes = "0" + durationMinutes;
234 }
235
236 curr_time.textContent = currentMinutes + ":" + currentSeconds;
237 }
238}
239
240// use : searched the current song playing on youtube
241function youtubeSearch() {
242 let searchString =
243 "https://www.youtube.com/results?search_query=" +
244 track_list[track_index].name +
245 "+" +
246 track_list[track_index].artist;
247 window.open(searchString, "_blank");
248}
249
250// console.table(track_list[track_index].name);