JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
now playing screen done!
+72
-119
+19
-6
index.html
+19
-6
index.html
···
23
23
<!-- bottom bar -->
24
24
</div>
25
25
<div id="bar">
26
-
<input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
27
-
<span id="playing-status">icon</span>
26
+
<input type="range" min="1" max="100" value="0" class="track-progress" onchange="seekTo()">
27
+
<span id="playing-status"></span>
28
28
<span id="current-time">00:00</span>
29
29
<span id="battery"></span>
30
30
</div>
31
31
<!-- screen end div -->
32
32
</div>
33
-
<!-- circles -->
34
-
<div class="circle big"></div>
33
+
<!-- grid controls -->
34
+
<div id="controls">
35
+
<span class="space"></span>
36
+
<button id="up">▲</button>
37
+
<span class="space"></span>
38
+
<!-- --- -->
39
+
<button onclick="prevTrack()" id="left">◄</button>
40
+
<button onclick="playpauseTrack()" id="play-pause"></button>
41
+
<button onclick="nextTrack()" class="right">►</button>
42
+
<!-- --- -->
43
+
<span class="space"></span>
44
+
<button class="down">▼</button>
45
+
<span class="space"></span>
46
+
</div>
47
+
<!-- old controls ...... -->
48
+
<!-- <div class="circle big"></div>
35
49
<div class="circle small"></div>
36
-
<!-- controls -->
37
50
<div class="up">▲</div>
38
51
<div class="play-pause">
39
52
<span onclick="prevTrack()" class="left">◄</span>
40
53
<button onclick="playpauseTrack()" id="play-pause-btn"></button>
41
54
<span onclick="nextTrack()" class="right">►</span>
42
55
</div>
43
-
<div class="down">▼</div>
56
+
<div class="down">▼</div> -->
44
57
<!-- music end div -->
45
58
</div>
46
59
<p>built using sayantanm19's <a href="https://github.com/sayantanm19/js-music-player">js-music-player</a></p>
+12
-19
main.js
+12
-19
main.js
···
1
-
// track that is currently playing
1
+
// tracks songs in playlist playing
2
2
let now_playing = document.querySelector("#now-playing");
3
-
// targets src attribute
3
+
4
+
// album cover img
4
5
let track_art = document.querySelector("#album");
5
-
6
6
let track_name = document.querySelector("#song");
7
7
let track_artist = document.querySelector("#artist");
8
8
let album_title = document.querySelector("#album-title");
9
9
let genre = document.querySelector("#genre");
10
10
let year = document.querySelector("#year");
11
11
12
-
let playpause_btn = document.querySelector("#play-pause-btn");
13
-
let next_btn = document.querySelector(".right");
14
-
let prev_btn = document.querySelector(".left");
15
-
16
-
let seek_slider = document.querySelector(".seek_slider");
17
-
let volume_slider = document.querySelector(".volume_slider");
12
+
let track_progress = document.querySelector(".track-progress");
18
13
let curr_time = document.querySelector("#current-time");
19
14
let playing_status = document.querySelector("#playing-status");
20
15
···
70
65
71
66
function resetValues() {
72
67
curr_time.textContent = "00:00";
73
-
seek_slider.value = 0;
68
+
track_progress.value = 0;
74
69
}
75
70
76
71
// Load the first track in the tracklist
···
99
94
}
100
95
101
96
function nextTrack() {
102
-
if (track_index < track_list.length - 1) track_index += 1;
97
+
if (track_index < track_list.length - 1) track_index++;
103
98
else track_index = 0;
104
99
loadTrack(track_index);
105
100
playTrack();
106
101
}
107
102
108
103
function prevTrack() {
109
-
if (track_index > 0) track_index -= 1;
110
-
else track_index = track_list.length;
104
+
// check if its the first track in playlist
105
+
if (track_index > 0) track_index--;
106
+
// if not, it updates to the index of the last track
107
+
else track_index = track_list.length - 1;
111
108
loadTrack(track_index);
112
109
playTrack();
113
110
}
114
111
115
112
function seekTo() {
116
-
let seekto = curr_track.duration * (seek_slider.value / 100);
113
+
let seekto = curr_track.duration * (track_progress.value / 100);
117
114
curr_track.currentTime = seekto;
118
-
}
119
-
120
-
function setVolume() {
121
-
curr_track.volume = volume_slider.value / 100;
122
115
}
123
116
124
117
function seekUpdate() {
···
127
120
if (!isNaN(curr_track.duration)) {
128
121
seekPosition = curr_track.currentTime * (100 / curr_track.duration);
129
122
130
-
seek_slider.value = seekPosition;
123
+
track_progress.value = seekPosition;
131
124
132
125
let currentMinutes = Math.floor(curr_track.currentTime / 60);
133
126
let currentSeconds = Math.floor(
+41
-94
style.css
+41
-94
style.css
···
4
4
5
5
/* mp3 player wrapper */
6
6
#music {
7
+
position: relative;
7
8
font-family: arial, nerdfont;
8
9
grid-area: music;
9
10
padding-top: 1px;
···
20
21
box-shadow: inset 2px -4px 10px #7e2222;
21
22
transition-duration: 0.5s;
22
23
border-radius: 10px;
24
+
overflow: hidden;
23
25
}
24
26
25
27
/* album cover */
···
36
38
padding: 0px;
37
39
}
38
40
39
-
/* controls CSS */
40
-
.circle {
41
-
pointer-events: none;
42
-
position: absolute;
43
-
border-radius: 50%;
44
-
}
45
-
46
-
.circle.small {
47
-
border: 1px solid rgb(132, 49, 49);
48
-
z-index: 2;
49
-
width: 50px;
50
-
height: 50px;
51
-
top: 320px;
52
-
left: 134px;
53
-
}
54
-
55
-
.circle.big {
56
-
background: rgb(186, 63, 63);
57
-
z-index: 1;
58
-
border: 1px solid rgb(221, 217, 217);
59
-
top: 284px;
60
-
left: 98px;
61
-
width: 121px;
62
-
height: 121px;
63
-
}
64
-
65
-
.up,
66
-
.down,
67
-
.play-pause {
41
+
/* controls grid */
42
+
#controls {
43
+
background: #ba3f3f;
68
44
position: relative;
69
-
text-align: center;
70
-
margin: 16px 0px;
71
-
z-index: 10;
72
-
}
73
-
74
-
.left,
75
-
.right,
76
-
.up,
77
-
.down {
78
-
text-shadow: 2px -1px 2px rgba(251, 160, 160, 0.562);
79
-
font-size: 12px;
80
-
color: rgb(78, 19, 19);
81
-
cursor: help;
82
-
}
83
-
84
-
.left {
85
-
padding-right: 23px;
45
+
display: grid;
46
+
border: 2px solid rgb(213, 213, 213);
47
+
width: 63%;
48
+
height: 27%;
49
+
margin: auto;
50
+
margin-top: 15px;
51
+
grid-template-columns: 33% 33% 33%;
52
+
grid-template-rows: 33% 33% 33%;
53
+
padding: 0px;
54
+
border-radius: 50%;
55
+
overflow: hidden;
86
56
}
87
57
88
-
.right {
89
-
padding-left: 21px;
90
-
}
91
-
92
-
.play-pause {
93
-
line-height: 19px;
94
-
}
95
-
96
-
button#play-pause-btn {
58
+
/* buttons in controls CSS */
59
+
#controls button {
60
+
cursor: pointer;
97
61
font-family: inherit;
98
-
cursor: pointer;
99
-
color: white;
100
-
font-size: 21px;
101
-
background-color: transparent;
62
+
font-size: 13px;
63
+
background: inherit;
102
64
border: none;
103
-
padding: 0px 6px;
65
+
color: #692222;
104
66
margin: 0px;
105
-
line-height: 12px;
67
+
text-shadow: 2px -1px 2px rgba(225, 212, 212, 0.815);
106
68
}
107
69
108
-
.play {
109
-
vertical-align: text-bottom;
70
+
button#play-pause {
71
+
color: white;
72
+
border: 1px solid rgb(39, 11, 11);
73
+
border-radius: 50%;
110
74
font-size: 14px;
111
75
}
112
76
113
-
.pause {
114
-
font-size: 10px;
115
-
}
116
-
117
-
/* .sony {
118
-
font-family: simple;
119
-
letter-spacing: 3px;
120
-
color: white;
121
-
position: absolute;
122
-
left: 78px;
123
-
top: 8px;
124
-
font-size: 18px;
125
-
} */
126
-
127
77
/* screen wrapper */
128
78
#screen {
129
79
position: relative;
···
142
92
line-height: 13px;
143
93
overflow: hidden;
144
94
color: white;
145
-
scrollbar-color: rgb(218, 155, 155) rgb(224, 199, 199);
95
+
scrollbar-color: rgb(173, 173, 173) transparent;
146
96
}
147
97
148
98
/* details box */
···
154
104
155
105
/* music info */
156
106
p.info {
157
-
margin: 4px 0px;
107
+
margin: 4px 4px;
158
108
padding: 0;
159
109
}
160
110
···
204
154
float: right;
205
155
}
206
156
207
-
#music a {
208
-
color: inherit;
209
-
text-decoration: none;
210
-
}
211
-
212
-
/* Modify the appearance of the slider */
213
-
.seek_slider {
157
+
/* song progress bar */
158
+
.track-progress {
159
+
cursor: help;
214
160
width: 100%;
215
161
height: 4px;
216
162
padding: 0px;
···
218
164
background: rgb(81, 81, 81);
219
165
}
220
166
221
-
/* Modify the appearance of the slider thumb */
222
-
.seek_slider::-webkit-slider-thumb,
223
-
.seek_slider::-moz-range-thumb {
167
+
/* song progress bar - thumb */
168
+
.track-progress::-webkit-slider-thumb,
169
+
.track-progress::-moz-range-thumb {
224
170
height: 3px;
225
171
width: 3px;
226
172
background: rgb(96, 155, 226);
227
-
cursor: help;
173
+
cursor: pointer;
228
174
border: none;
229
175
border-radius: 0px;
230
176
}
231
177
232
-
.seek_slider::-moz-range-progress,
233
-
.seek_slider::-webkit-slider-runnable-track {
178
+
/* song progress - bar progress */
179
+
.track-progress::-moz-range-progress,
180
+
.track-progress::-webkit-slider-runnable-track {
234
181
background: rgb(96, 155, 226);
235
182
}
236
183
237
-
#current-time,
238
-
.total-duration {
184
+
/* current time of song */
185
+
#current-time {
239
186
display: inline-block;
240
187
padding: 10px;
241
188
}