JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
done
+168
-7
files/11100011.jpeg
files/11100011.jpeg
This is a binary file and will not be displayed.
+117
files/tooltip-jquary.js
+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
+10
files/tooltip.js
+11
-6
index.html
+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
+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
+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 {