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.

done

+168 -7
files/11100011.jpeg

This is a binary file and will not be displayed.

+117
files/tooltip-jquary.js
··· 1 + //style-my-tootltips by malihu (http://manos.malihu.gr) 2 + //plugin home http://manos.malihu.gr/style-my-tooltips-jquery-plugin 3 + 4 + !(function (a) { 5 + var b = { 6 + init: function (b) { 7 + function e(a) { 8 + var b = a.pageX, 9 + c = a.pageY; 10 + d.style_my_tooltips("position", { 11 + smtCursorCoordsX: b, 12 + smtCursorCoordsY: c, 13 + }); 14 + } 15 + var c = { 16 + tip_follows_cursor: !1, 17 + tip_delay_time: 700, 18 + tip_fade_speed: 300, 19 + attribute: "title", 20 + }, 21 + b = a.extend(c, b); 22 + 0 === a("#s-m-t-tooltip").length && 23 + a("body").append("<div id='s-m-t-tooltip'><div></div></div>"); 24 + var d = a("#s-m-t-tooltip"); 25 + return ( 26 + d 27 + .css({ position: "absolute", display: "none" }) 28 + .data("smt-z-index", d.css("z-index")) 29 + .children("div") 30 + .css({ width: "100%", height: "100%" }), 31 + a(document).on( 32 + "mouseout mousedown click", 33 + ".smt-current-element", 34 + function () { 35 + var c = a(this); 36 + clearTimeout(smtTooltip_delay), 37 + d.style_my_tooltips("hide", { speed: c.data("smt-fade-speed") }), 38 + a(document).unbind("mousemove"), 39 + c.removeClass("smt-current-element"), 40 + "" === c.attr(b.attribute) && 41 + c.attr(b.attribute, c.data("smt-title")); 42 + } 43 + ), 44 + this.on("mouseover", function () { 45 + var f = a(this), 46 + g = f.attr(b.attribute); 47 + f 48 + .addClass("smt-current-element") 49 + .data({ "smt-title": g, "smt-fade-speed": b.tip_fade_speed }) 50 + .attr(b.attribute, ""), 51 + d.style_my_tooltips("update", { 52 + title: g, 53 + speed: b.tip_fade_speed, 54 + delay: b.tip_delay_time, 55 + tip_follows_cursor: b.tip_follows_cursor, 56 + }), 57 + a(document).bind("mousemove", function (a) { 58 + e(a); 59 + }); 60 + }) 61 + ); 62 + }, 63 + update: function (b) { 64 + var c = a(this); 65 + c 66 + .stop() 67 + .css({ display: "none", "z-index": c.data("smt-z-index") }) 68 + .children("div") 69 + .text(b.title), 70 + (smtTooltip_delay = setTimeout(function () { 71 + c.style_my_tooltips("show", { 72 + speed: b.speed, 73 + tip_follows_cursor: b.tip_follows_cursor, 74 + }); 75 + }, b.delay)); 76 + }, 77 + show: function (b) { 78 + var c = a(this); 79 + c.stop().fadeTo(b.speed, 1), 80 + b.tip_follows_cursor || a(document).unbind("mousemove"); 81 + }, 82 + hide: function (b) { 83 + var c = a(this); 84 + c.stop().fadeTo(b.speed, 0, function () { 85 + c.css({ "z-index": "-1" }); 86 + }); 87 + }, 88 + position: function (b) { 89 + var c = a(this), 90 + d = a(window).scrollLeft(), 91 + e = a(window).scrollTop(), 92 + f = c.outerWidth(!0), 93 + g = c.outerHeight(!0), 94 + h = b.smtCursorCoordsX + f - d, 95 + i = b.smtCursorCoordsY + g - e; 96 + if (h <= a(window).width() && h <= a(document).width()) 97 + c.css("left", b.smtCursorCoordsX); 98 + else { 99 + var j = b.smtCursorCoordsX - f; 100 + j >= d ? c.css("left", j) : c.css("left", d); 101 + } 102 + if (i <= a(window).height() && i <= a(document).height()) 103 + c.css("top", b.smtCursorCoordsY); 104 + else { 105 + var k = b.smtCursorCoordsY - g; 106 + k >= e ? c.css("top", k) : c.css("top", e); 107 + } 108 + }, 109 + }; 110 + a.fn.style_my_tooltips = function (c) { 111 + return b[c] 112 + ? b[c].apply(this, Array.prototype.slice.call(arguments, 1)) 113 + : "object" !== typeof c && c 114 + ? void a.error("Method " + c + " does not exist") 115 + : b.init.apply(this, arguments); 116 + }; 117 + })(jQuery);
+10
files/tooltip.js
··· 1 + (function ($) { 2 + $(document).ready(function () { 3 + $("[title]").style_my_tooltips({ 4 + tip_follows_cursor: true, 5 + tip_delay_time: 10, 6 + tip_fade_speed: 10, 7 + attribute: "title", 8 + }); 9 + }); 10 + })(jQuery);
+11 -6
index.html
··· 5 5 <meta charset="UTF-8"> 6 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 7 <title>JS walkman mp3 player</title> 8 + <!-- body stylesheet --> 8 9 <link rel="stylesheet" type="text/css" href="style.css"> 10 + <!-- for customizable tooltips --> 11 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 12 + <script src="/files/tooltip-jquary.js"></script> 13 + <script src="/files/tooltip.js"></script> 9 14 </head> 10 15 11 16 <body> ··· 42 47 </div> 43 48 <!-- grid controls --> 44 49 <div id="controls"> 45 - <button id="playlist-btn" onclick="showPlaylist()">playlist</button> 46 - <button id="up">▲</button> 47 - <button id="current-song-btn" onclick="showCurrentSong()">music</button> 50 + <button title="playlist screen" id="playlist-btn" onclick="showPlaylist()">menu</button> 51 + <button class="up">▲</button> 52 + <button title="currently playing song screen" id="current-song-btn" onclick="showCurrentSong()">music</button> 48 53 <!-- --- --> 49 - <button onclick="prevTrack()" id="left">◄</button> 54 + <button title="previous track" onclick="prevTrack()" id="left">◄</button> 50 55 <button onclick="playpauseTrack()" id="play-pause">󰐎</button> 51 - <button onclick="nextTrack()" class="right">►</button> 56 + <button title="next track" onclick="nextTrack()" class="right">►</button> 52 57 <!-- --- --> 53 58 <span class="space"></span> 54 59 <button class="down">▼</button> 55 60 <span class="space"></span> 56 61 </div> 57 62 </div> 58 - <p>built using sayantanm19's <a href="https://github.com/sayantanm19/js-music-player">js-music-player</a></p> 63 + <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> 59 64 <script src="main.js"></script> 60 65 </body> 61 66
+11 -1
main.js
··· 29 29 // Define the tracks that have to be played 30 30 let track_list = [ 31 31 { 32 + name: "Camel8strike", 33 + artist: "Asian Glow", 34 + album: "11100011", 35 + genre: "Shoegaze", 36 + year: "2025", 37 + image: "files/11100011.jpeg", 38 + path: "https://files.catbox.moe/jfmagx.mp3", 39 + }, 40 + { 32 41 name: "Cyber Space 2-1: Slice & Sway", 33 42 artist: "SEGA SOUND TEAM", 34 43 album: "Sonic Frontiers Original Soundtrack Stillness & Motion", ··· 111 120 112 121 // update current song name on bottom bar in playlist screen 113 122 current_song_playing.innerHTML = 114 - "<marquee scrollamount='1'>" + track_list[track_index].name + "</marquee>"; 123 + "<marquee scrollamount='3'>" + track_list[track_index].name + "</marquee>"; 115 124 116 125 updateTimer = setInterval(seekUpdate, 1000); 117 126 curr_track.addEventListener("ended", nextTrack); ··· 137 146 isPlaying = true; 138 147 playing_status.textContent = "󰐊"; 139 148 playing_status.style.color = "rgb(35, 236, 35)"; 149 + showCurrentSong(); 140 150 } 141 151 142 152 // when track is paused
+19
style.css
··· 66 66 text-shadow: 2px -1px 2px rgba(225, 212, 212, 0.815); 67 67 } 68 68 69 + #controls button.down, 70 + #controls button.up { 71 + cursor: not-allowed; 72 + } 73 + 69 74 button#playlist-btn, 70 75 button#current-song-btn { 71 76 position: relative; ··· 136 141 font-size: 10px; 137 142 line-height: 13px; 138 143 } 144 + 139 145 /* playlist screen track listing album cover */ 140 146 #playlist li img { 141 147 display: inline-block; ··· 266 272 .track-progress::-moz-range-progress, 267 273 .track-progress::-webkit-slider-runnable-track { 268 274 background: rgb(96, 155, 226); 275 + } 276 + 277 + #s-m-t-tooltip { 278 + background: rgb(0, 0, 0); 279 + border-radius: 2px; 280 + font-size: 11px; 281 + color: rgb(238, 215, 215); 282 + border: 1px solid rgb(6, 6, 6); 283 + max-width: 400px; 284 + text-align: center; 285 + z-index: 9999; 286 + margin: 30px 15px 7px 12px; 287 + padding: 5px; 269 288 } 270 289 271 290 @font-face {