Skip to content

Commit 323f17f

Browse files
swapnilsparshswapnilsparsh
committed
Day 28 - Music Player
1 parent 7515162 commit 323f17f

File tree

7 files changed

+237
-0
lines changed

7 files changed

+237
-0
lines changed

‎28 - Music Player/assets/Cradles.mp3

8.01 MB
Binary file not shown.

‎28 - Music Player/assets/music.png

2.27 KB
Loading

‎28 - Music Player/assets/ncs.jpg

6.67 KB
Loading

‎28 - Music Player/font/sans.ttf

54.5 KB
Binary file not shown.

‎28 - Music Player/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
8+
<link rel="shortcut icon" href="assets/music.png" type="image/x-icon">
9+
<link rel="stylesheet" href="style.css">
10+
<title>Music Player</title>
11+
</head>
12+
<body>
13+
<h1>Music Player</h1>
14+
<div class="player">
15+
<div class="details">
16+
<div class="track-art"></div>
17+
<div class="track-name">Cradles</div>
18+
<div class="track-artist">Sub Urban</div>
19+
</div>
20+
<div class="buttons">
21+
<div class="playpause-track" onclick="playpauseTrack()"><i class="fa fa-play-circle fa-5x"></i></div>
22+
</div>
23+
<div class="slider_container">
24+
<div class="current-time">00:00</div>
25+
<input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
26+
<div class="total-duration">00:00</div>
27+
</div>
28+
<div class="slider_container">
29+
<i class="fa fa-volume-down"></i>
30+
<input type="range" min="1" max="100" value="99" class="volume_slider" onchange="setVolume()">
31+
<i class="fa fa-volume-up"></i>
32+
</div>
33+
</div>
34+
<footer>
35+
<p>&#x3c; &#47; &#x3e; with ❤️ by
36+
<a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
37+
<br>
38+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank">#30DaysOfJavaScript
39+
</a>
40+
</p>
41+
</footer>
42+
<script src="script.js"></script>
43+
</body>
44+
</html>

‎28 - Music Player/script.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
let now_playing = document.querySelector(".now-playing");
2+
let playpause_btn = document.querySelector(".playpause-track");
3+
4+
let seek_slider = document.querySelector(".seek_slider");
5+
let volume_slider = document.querySelector(".volume_slider");
6+
let curr_time = document.querySelector(".current-time");
7+
let total_duration = document.querySelector(".total-duration");
8+
9+
let track_index = 0;
10+
let isPlaying = false;
11+
let updateTimer;
12+
13+
// Create new audio element
14+
let curr_track = document.createElement('audio');
15+
16+
function loadTrack(track_index) {
17+
clearInterval(updateTimer);
18+
resetValues();
19+
curr_track.src = "assets/cradles.mp3";
20+
curr_track.load();
21+
updateTimer = setInterval(seekUpdate, 1000);
22+
}
23+
24+
function resetValues() {
25+
curr_time.textContent = "00:00";
26+
total_duration.textContent = "00:00";
27+
seek_slider.value = 0;
28+
}
29+
30+
// Load the track
31+
loadTrack(track_index);
32+
33+
function playpauseTrack() {
34+
if (!isPlaying) playTrack();
35+
else pauseTrack();
36+
}
37+
38+
function playTrack() {
39+
curr_track.play();
40+
isPlaying = true;
41+
playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
42+
}
43+
44+
function pauseTrack() {
45+
curr_track.pause();
46+
isPlaying = false;
47+
playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';;
48+
}
49+
50+
function seekTo() {
51+
let seekto = curr_track.duration * (seek_slider.value / 100);
52+
curr_track.currentTime = seekto;
53+
}
54+
55+
function setVolume() {
56+
curr_track.volume = volume_slider.value / 100;
57+
}
58+
59+
//Stackoverflow
60+
61+
function seekUpdate() {
62+
let seekPosition = 0;
63+
64+
if (!isNaN(curr_track.duration)) {
65+
seekPosition = curr_track.currentTime * (100 / curr_track.duration);
66+
67+
seek_slider.value = seekPosition;
68+
69+
let currentMinutes = Math.floor(curr_track.currentTime / 60);
70+
let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
71+
let durationMinutes = Math.floor(curr_track.duration / 60);
72+
let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
73+
74+
if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
75+
if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
76+
if (currentMinutes < 10) { currentMinutes = "0" + currentMinutes; }
77+
if (durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }
78+
79+
curr_time.textContent = currentMinutes + ":" + currentSeconds;
80+
total_duration.textContent = durationMinutes + ":" + durationSeconds;
81+
}
82+
}

‎28 - Music Player/style.css

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
background-color: #19172e;
6+
color: white;
7+
font-family: "sans";
8+
overflow: hidden;
9+
}
10+
11+
@font-face {
12+
font-family: "sans";
13+
src: url(font/sans.ttf);
14+
}
15+
16+
h1{
17+
text-align: center;
18+
top: 0;
19+
padding-top: 50px;
20+
}
21+
22+
.player {
23+
height: 78vh;
24+
display: flex;
25+
align-items: center;
26+
flex-direction: column;
27+
justify-content: center;
28+
}
29+
30+
.details {
31+
display: flex;
32+
align-items: center;
33+
flex-direction: column;
34+
justify-content: center;
35+
}
36+
37+
.track-art {
38+
margin: 25px;
39+
height: 150px;
40+
width: 150px;
41+
background-image: url("assets/ncs.jpg");
42+
background-size: cover;
43+
border-radius: 15%;
44+
}
45+
46+
.now-playing {
47+
font-size: 1rem;
48+
}
49+
50+
.track-name {
51+
font-size: 2.5rem;
52+
}
53+
54+
.track-artist {
55+
font-size: 1.5rem;
56+
}
57+
58+
.buttons {
59+
display: flex;
60+
flex-direction: row;
61+
align-items: center;
62+
}
63+
64+
.playpause-track {
65+
padding: 15px;
66+
}
67+
68+
.slider_container {
69+
width: 75%;
70+
max-width: 400px;
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
}
75+
76+
.seek_slider#special,
77+
.volume_slider#special {
78+
appearance: none;
79+
height: 5px;
80+
background: white;
81+
}
82+
83+
.seek_slider {
84+
width: 60%;
85+
}
86+
87+
.volume_slider {
88+
width: 30%;
89+
}
90+
91+
.current-time,
92+
.total-duration {
93+
padding: 5px;
94+
}
95+
96+
i.fa-volume-down,
97+
i.fa-volume-up {
98+
padding: 5px;
99+
}
100+
101+
footer {
102+
text-align: center;
103+
font-size: 1rem;
104+
bottom: 0;
105+
padding: 5px;
106+
line-height: 3vh;
107+
}
108+
109+
footer a:visited {
110+
color: inherit;
111+
}

0 commit comments

Comments
 (0)