JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
playing now screen done!
+22
-214
+4
-3
README.md
+4
-3
README.md
···
4
4
5
5
the overall CSS will most likely be the same as the [last.fm widget](https://github.com/biancarosa/lastfm-last-played) i designed for my homepage but i would like it for the UI to be more accurate to the mp3 players around 2008.
6
6
7
-
8
-
7
+
![[playlist screen]](examples/css.jpg)
8
+
9
9
10
10
my fun little summer project.
11
11
12
12
### to-do's / ideas
13
13
14
14
- [ ] screen for playlist menu
15
-
- [ ] screen for currently playing song
15
+
- [ ] make time blink when song is paused
16
+
- [x] screen for currently playing song
-141
copy.css
-141
copy.css
···
1
-
#music {
2
-
font-family: arial;
3
-
grid-area: music;
4
-
padding: 10px;
5
-
background: rgb(193, 215, 242);
6
-
background: linear-gradient(
7
-
320deg,
8
-
rgba(193, 215, 242, 1) 0%,
9
-
rgba(255, 208, 236, 1) 48%,
10
-
rgba(255, 229, 150, 1) 100%
11
-
);
12
-
border: 3px solid #e7d7f5;
13
-
border-top: 1px;
14
-
border-right: 0px;
15
-
margin-left: 50px;
16
-
color: rgb(140, 129, 179);
17
-
font-size: 21px;
18
-
line-height: 31px;
19
-
width: 200px;
20
-
height: 400px;
21
-
box-shadow: -5px 5px 1px 1px #32283c38;
22
-
transition-duration: 0.5s;
23
-
}
24
-
25
-
#album span {
26
-
display: inline-block;
27
-
background: white;
28
-
color: black;
29
-
border: 1px solid white;
30
-
width: 80px;
31
-
height: 80px;
32
-
}
33
-
34
-
#music:hover {
35
-
box-shadow: none;
36
-
}
37
-
38
-
.icons {
39
-
font-size: 10px;
40
-
text-shadow: 1px 1px 2px #ffffff, -1px -1px 2px #ffffff;
41
-
}
42
-
43
-
.circle {
44
-
pointer-events: none;
45
-
position: absolute;
46
-
border-radius: 50%;
47
-
border: 1px solid rgb(67, 58, 98);
48
-
}
49
-
50
-
.small {
51
-
width: 50px;
52
-
height: 50px;
53
-
top: 288px;
54
-
left: 72px;
55
-
}
56
-
57
-
.big {
58
-
top: 252px;
59
-
left: 37px;
60
-
width: 121px;
61
-
height: 121px;
62
-
}
63
-
64
-
#screen {
65
-
background: rgb(39, 36, 36);
66
-
text-align: center;
67
-
margin: auto;
68
-
margin-top: 10px;
69
-
width: 180px;
70
-
height: 230px;
71
-
border: 20px solid black;
72
-
border-top-width: 30px;
73
-
border-bottom-width: 30px;
74
-
border-radius: 20px;
75
-
font-size: 12px;
76
-
line-height: 16px;
77
-
overflow: auto;
78
-
color: white;
79
-
padding: 5px;
80
-
scrollbar-color: rgb(39, 36, 36) rgb(39, 36, 36);
81
-
word-break: break-all;
82
-
}
83
-
84
-
.up,
85
-
.down {
86
-
text-align: center;
87
-
}
88
-
89
-
.left,
90
-
.right,
91
-
.up,
92
-
.down {
93
-
font-size: 12px;
94
-
}
95
-
.left {
96
-
padding-right: 21px;
97
-
}
98
-
99
-
.right {
100
-
padding-left: 21px;
101
-
}
102
-
103
-
.play-pause {
104
-
text-align: center;
105
-
line-height: 15px;
106
-
}
107
-
108
-
.play {
109
-
vertical-align: text-bottom;
110
-
font-size: 14px;
111
-
color: white;
112
-
}
113
-
114
-
.pause {
115
-
font-size: 10px;
116
-
color: white;
117
-
}
118
-
119
-
.sony {
120
-
font-family: simple;
121
-
letter-spacing: 3px;
122
-
color: white;
123
-
position: absolute;
124
-
left: 78px;
125
-
top: 8px;
126
-
font-size: 18px;
127
-
}
128
-
129
-
#song {
130
-
text-align: left;
131
-
}
132
-
133
-
#screen p {
134
-
margin: 0;
135
-
padding: 0;
136
-
}
137
-
138
-
#music a {
139
-
color: inherit;
140
-
text-decoration: none;
141
-
}
examples/6163fuwP3JL.jpg
examples/ui-currently-playing.jpg
examples/6163fuwP3JL.jpg
examples/ui-currently-playing.jpg
examples/css.jpg
examples/css.jpg
This is a binary file and will not be displayed.
examples/ui.jpg
examples/ui-playlist.jpg
examples/ui.jpg
examples/ui-playlist.jpg
examples/ui2.jpg
examples/ui2.jpg
This is a binary file and will not be displayed.
-44
index-fork.html
-44
index-fork.html
···
1
-
<!DOCTYPE html>
2
-
<html lang="en">
3
-
4
-
<head>
5
-
<meta charset="UTF-8">
6
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
-
<title>Simple Music Player</title>
8
-
<!-- Load FontAwesome icons -->
9
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
10
-
11
-
<!-- Load the custom CSS style file -->
12
-
<link rel="stylesheet" type="text/css" href="style.css">
13
-
</head>
14
-
15
-
<body>
16
-
<div class="player">
17
-
<div class="details">
18
-
<div class="now-playing">PLAYING x OF y</div>
19
-
<div class="track-art"></div>
20
-
<div class="track-name">Track Name</div>
21
-
<div class="track-artist">Track Artist</div>
22
-
</div>
23
-
<div class="buttons">
24
-
<div class="prev-track" onclick="prevTrack()"><i class="fa fa-step-backward fa-2x"></i></div>
25
-
<div class="playpause-track" onclick="playpauseTrack()"><i class="fa fa-play-circle fa-5x"></i></div>
26
-
<div class="next-track" onclick="nextTrack()"><i class="fa fa-step-forward fa-2x"></i></div>
27
-
</div>
28
-
<div class="slider_container">
29
-
<div class="current-time">00:00</div>
30
-
<input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
31
-
<div class="total-duration">00:00</div>
32
-
</div>
33
-
<div class="slider_container">
34
-
<i class="fa fa-volume-down"></i>
35
-
<input type="range" min="1" max="100" value="99" class="volume_slider" onchange="setVolume()">
36
-
<i class="fa fa-volume-up"></i>
37
-
</div>
38
-
</div>
39
-
40
-
<!-- Load the main script for the player -->
41
-
<script src="main.js"></script>
42
-
</body>
43
-
44
-
</html>
-11
index.html
-11
index.html
···
44
44
<button class="down">▼</button>
45
45
<span class="space"></span>
46
46
</div>
47
-
<!-- old controls ...... -->
48
-
<!-- <div class="circle big"></div>
49
-
<div class="circle small"></div>
50
-
<div class="up">▲</div>
51
-
<div class="play-pause">
52
-
<span onclick="prevTrack()" class="left">◄</span>
53
-
<button onclick="playpauseTrack()" id="play-pause-btn"></button>
54
-
<span onclick="nextTrack()" class="right">►</span>
55
-
</div>
56
-
<div class="down">▼</div> -->
57
-
<!-- music end div -->
58
47
</div>
59
48
<p>built using sayantanm19's <a href="https://github.com/sayantanm19/js-music-player">js-music-player</a></p>
60
49
<script src="main.js"></script>
+18
-15
style.css
+18
-15
style.css
···
9
9
grid-area: music;
10
10
padding-top: 1px;
11
11
background: rgb(232, 84, 84);
12
-
border: 2px solid #3a304244;
13
12
border-top: 1px;
14
13
border-right: 0px;
15
14
margin-left: 50px;
···
45
44
display: grid;
46
45
border: 2px solid rgb(213, 213, 213);
47
46
width: 63%;
48
-
height: 27%;
47
+
height: 30%;
49
48
margin: auto;
50
-
margin-top: 15px;
49
+
margin-top: 10px;
51
50
grid-template-columns: 33% 33% 33%;
52
51
grid-template-rows: 33% 33% 33%;
53
52
padding: 0px;
···
80
79
background: rgb(39, 36, 36);
81
80
text-align: left;
82
81
margin: auto;
83
-
margin-top: 10px;
84
-
width: 180px;
85
-
height: 250px;
82
+
width: 100%;
83
+
height: 63%;
86
84
border: 20px solid black;
87
85
border-top-width: 30px;
88
86
border-bottom-width: 30px;
89
-
border-radius: 20px;
90
87
font-size: 11px;
91
88
letter-spacing: 1px;
92
89
line-height: 13px;
···
119
116
display: inline-block;
120
117
position: absolute;
121
118
float: right;
122
-
margin-top: 43px;
123
-
margin-left: 50px;
119
+
margin-top: 30%;
120
+
margin-left: 40%;
124
121
}
125
122
126
123
/* bottom bar */
127
124
#bar {
128
-
background: #3b3b3b;
125
+
background: #454343;
129
126
background: linear-gradient(
130
127
360deg,
131
-
rgba(59, 59, 59, 1) 0%,
132
-
rgba(227, 227, 227, 1) 100%
128
+
rgb(29, 28, 28) 0%,
129
+
rgb(149, 149, 149) 100%
133
130
);
134
131
width: 100%;
135
132
font-size: 9px;
···
161
158
height: 4px;
162
159
padding: 0px;
163
160
margin: 0px;
164
-
background: rgb(81, 81, 81);
161
+
background: #454343;
162
+
background: linear-gradient(
163
+
360deg,
164
+
rgb(68, 68, 68) 0%,
165
+
rgb(129, 129, 129) 100%
166
+
);
167
+
border-bottom: 1px solid black;
165
168
}
166
169
167
170
/* song progress bar - thumb */
168
171
.track-progress::-webkit-slider-thumb,
169
172
.track-progress::-moz-range-thumb {
170
-
height: 3px;
171
-
width: 3px;
173
+
height: 2.6px;
174
+
width: 2px;
172
175
background: rgb(96, 155, 226);
173
176
cursor: pointer;
174
177
border: none;