Skip to content

Commit ab35388

Browse files
rezamehdikhanloorezamehdikhanloo
committed
Adding Day #75
1 parent bcad150 commit ab35388

File tree

12 files changed

+299
-1
lines changed

12 files changed

+299
-1
lines changed

‎Day #75 - Mini Music Player/README.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Day #75
2+
3+
### Mini Music Player
4+
In this tutorial ([Open in Youtube](https://youtu.be/SAzB_M2wpR0)), We will work on building a mini music player from scratch! In this beginner-friendly video, we'll walk you through the step-by-step process of creating a fully functional music player using HTML, CSS, and JavaScript.
5+
6+
Here's what you'll learn:
7+
8+
🔹 Setting up the basic structure of our HTML file to accommodate the music player.
9+
🔹 Styling our music player with CSS to make it visually appealing and user-friendly.
10+
🔹 Implementing JavaScript functionality to handle play, pause, next and previous.
11+
🔹 Enhancing user experience with additional features like track progress control.
12+
13+
# Screenshot
14+
Here we have project screenshot :
15+
16+
![screenshot-1](screenshot.jpg)

‎Day #75 - Mini Music Player/assets/1.jpg

1.34 MB
Loading

‎Day #75 - Mini Music Player/assets/1.mp3

3.9 MB
Binary file not shown.

‎Day #75 - Mini Music Player/assets/2.jpg

1.4 MB
Loading

‎Day #75 - Mini Music Player/assets/2.mp3

6.24 MB
Binary file not shown.

‎Day #75 - Mini Music Player/assets/3.jpg

295 KB
Loading

‎Day #75 - Mini Music Player/assets/3.mp3

6.11 MB
Binary file not shown.

‎Day #75 - Mini Music Player/index.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Day #75 - Mini Music Player | AsmrProg</title>
10+
</head>
11+
12+
<body>
13+
14+
<div class="container">
15+
<div class="song-info">
16+
<div class="artist-name"></div>
17+
<div class="song-name"></div>
18+
<div class="progress-bar">
19+
<div class="fill-bar"></div>
20+
</div>
21+
<div class="time">0:00 - 0:00</div>
22+
</div>
23+
<div class="disk">
24+
<div class="circle"></div>
25+
<div id="cover" class="cover"></div>
26+
</div>
27+
<div class="controls">
28+
<i id="prev" class="prev-btn fa-solid fa-backward"></i>
29+
<i id="play" class="play-btn fa-solid fa-play"></i>
30+
<i id="next" class="next-btn fa-solid fa-forward"></i>
31+
</div>
32+
</div>
33+
34+
35+
<script src="script.js"></script>
36+
37+
</body>
38+
39+
</html>

‎Day #75 - Mini Music Player/screenshot.jpg

76.4 KB
Loading

‎Day #75 - Mini Music Player/script.js

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
const songsList = [
2+
{
3+
name: "Jazz In Paris",
4+
artist: "Media Right Productions",
5+
src: "assets/1.mp3",
6+
cover: "assets/1.jpg"
7+
},
8+
{
9+
name: "Blue Skies",
10+
artist: "Silent Partner",
11+
src: "assets/2.mp3",
12+
cover: "assets/2.jpg"
13+
},
14+
{
15+
name: "Crimson Fly",
16+
artist: "Huma-Huma",
17+
src: "assets/3.mp3",
18+
cover: "assets/3.jpg"
19+
}
20+
];
21+
22+
const artistName = document.querySelector('.artist-name');
23+
const musicName = document.querySelector('.song-name');
24+
const fillBar = document.querySelector('.fill-bar');
25+
const time = document.querySelector('.time');
26+
const cover = document.getElementById('cover');
27+
const playBtn = document.getElementById('play');
28+
const prevBtn = document.getElementById('prev');
29+
const nextBtn = document.getElementById('next');
30+
const prog = document.querySelector('.progress-bar');
31+
32+
let song = new Audio();
33+
let currentSong = 0;
34+
let playing = false;
35+
36+
document.addEventListener('DOMContentLoaded', () => {
37+
loadSong(currentSong);
38+
song.addEventListener('timeupdate', updateProgress);
39+
song.addEventListener('ended', nextSong);
40+
prevBtn.addEventListener('click', prevSong);
41+
nextBtn.addEventListener('click', nextSong);
42+
playBtn.addEventListener('click', togglePlayPause);
43+
prog.addEventListener('click', seek);
44+
});
45+
46+
function loadSong(index) {
47+
const { name, artist, src, cover: thumb } = songsList[index];
48+
artistName.innerText = artist;
49+
musicName.innerText = name;
50+
song.src = src;
51+
cover.style.backgroundImage = `url(${thumb})`;
52+
}
53+
54+
function updateProgress() {
55+
if (song.duration) {
56+
const pos = (song.currentTime / song.duration) * 100;
57+
fillBar.style.width = `${pos}%`;
58+
59+
const duration = formatTime(song.duration);
60+
const currentTime = formatTime(song.currentTime);
61+
time.innerText = `${currentTime} - ${duration}`;
62+
63+
}
64+
}
65+
66+
function formatTime(seconds) {
67+
const minutes = Math.floor(seconds / 60);
68+
const secs = Math.floor(seconds % 60);
69+
return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
70+
}
71+
72+
function togglePlayPause() {
73+
if (playing) {
74+
song.pause();
75+
} else {
76+
song.play();
77+
}
78+
playing = !playing;
79+
playBtn.classList.toggle('fa-pause', playing);
80+
playBtn.classList.toggle('fa-play', !playing);
81+
cover.classList.toggle('active', playing);
82+
}
83+
84+
function nextSong() {
85+
currentSong = (currentSong + 1) % songsList.length;
86+
playMusic();
87+
}
88+
89+
function prevSong() {
90+
currentSong = (currentSong - 1 + songsList.length) % songsList.length;
91+
playMusic();
92+
}
93+
94+
function playMusic() {
95+
loadSong(currentSong);
96+
song.play();
97+
playing = true;
98+
playBtn.classList.add('fa-pause');
99+
playBtn.classList.remove('fa-play');
100+
cover.classList.add('active');
101+
}
102+
103+
function seek(e) {
104+
const pos = (e.offsetX / prog.clientWidth) * song.duration;
105+
song.currentTime = pos;
106+
}

‎Day #75 - Mini Music Player/style.css

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
2+
3+
body{
4+
background-color: #ddd;
5+
margin: 0;
6+
font-family: 'Roboto', sans-serif;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
height: 100vh;
11+
}
12+
13+
.container{
14+
position: relative;
15+
padding: 10px;
16+
}
17+
18+
.container .song-info{
19+
background-color: #000;
20+
margin: 0 15px;
21+
padding: 15px 15px 5px 150px;
22+
border-radius: 15px 15px 0 0;
23+
}
24+
25+
.container .song-info .song-name{
26+
color: #b9b9b9;
27+
font-size: 14px;
28+
margin: 3px 0 20px;
29+
}
30+
31+
.container .song-info .artist-name{
32+
color: #fff;
33+
font-weight: bold;
34+
font-size: 18px;
35+
}
36+
37+
.container .song-info .progress-bar{
38+
background-color: #505050;
39+
border-radius: 20px;
40+
cursor: pointer;
41+
}
42+
43+
.container .song-info .progress-bar .fill-bar{
44+
width: 0;
45+
height: 6px;
46+
border-radius: 20px;
47+
background: #1db954;
48+
}
49+
50+
.container .song-info .time{
51+
font-size: 15px;
52+
color: #b9b9b9;
53+
margin: 10px 0;
54+
}
55+
56+
.container .disk{
57+
max-width: 120px;
58+
}
59+
60+
.container .disk .active{
61+
animation: rotate 3s linear 0s infinite forwards;
62+
}
63+
64+
.container .disk .cover{
65+
width: 145px;
66+
height: 145px;
67+
position: absolute;
68+
top: 10px;
69+
left: 10px;
70+
background: url("assets/1.jpg");
71+
background-repeat: no-repeat;
72+
background-position: bottom center;
73+
background-size: cover;
74+
border: 3px solid #fff;
75+
border-radius: 50%;
76+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
77+
transition: all 0.2s ease-in-out;
78+
}
79+
80+
.container .disk .circle{
81+
position: absolute;
82+
width: 30px;
83+
height: 30px;
84+
left: 15%;
85+
top: 29%;
86+
background-color: #fff;
87+
z-index: 1;
88+
border-radius: 50%;
89+
}
90+
91+
.container .controls{
92+
display: flex;
93+
align-items: center;
94+
justify-content: center;
95+
gap: 8px;
96+
background-color: #292929;
97+
width: 450px;
98+
height: 100px;
99+
border-radius: 20px;
100+
text-align: center;
101+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
102+
}
103+
104+
.container .controls #play{
105+
background-color: #1db954;
106+
color: #fff;
107+
padding: 15px 17px 14px 18px;
108+
font-size: 28px;
109+
border-radius: 50%;
110+
transition: all 0.3s ease;
111+
}
112+
113+
.container .controls #play:hover{
114+
background: #189945;
115+
}
116+
117+
.container .controls i{
118+
padding: 30px 8px;
119+
font-size: 35px;
120+
cursor: pointer;
121+
color: #919191;
122+
transition: all 0.3s ease;
123+
}
124+
125+
.container .controls i:hover{
126+
color: #fff;
127+
}
128+
129+
@keyframes rotate {
130+
0% {
131+
transform: rotateZ(0deg);
132+
}
133+
100% {
134+
transform: rotateZ(360deg);
135+
}
136+
}

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,9 @@ Here we have list of projects:
8484
72. Common Sliders
8585
73. Gameboy Tetris Clone
8686
74. Flashcard App
87+
75. Mini Music Player
8788

88-
## Where is rest 26 Projects
89+
## Where is rest 25 Projects
8990

9091
We create a project each 3 days with voting on our <a href="https://youtube.com/@AsmrProg" target="_blank">Youtube</a> channel.
9192
You can vote for upcoming projects on our channel **community** page :wink:

0 commit comments

Comments
 (0)