JS music player that resembles a sony walkman from 2008 doqmeat.com/notebook/F2U/preview/walkman
html-template
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

updates around code, more comments

doqmeat 0118f171 7dc6a62f

+107 -76
+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 ![gif of mp3 player](examples/walkman.gif) 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

This is a binary file and will not be displayed.

+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
··· 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
··· 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);