Skip to content

Commit 164dcb1

Browse files
bhargavnovabhargavnova
authored
[+] Added : Python Update based Web Music Player.
1 parent 41aa3fc commit 164dcb1

File tree

16 files changed

+1032
-0
lines changed

16 files changed

+1032
-0
lines changed

‎py_based_music_player/README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Web Based Music Player , Update Music Using Python
2+
3+
-> Web based ( HTML, CSS , JS) based Music player, but instead of manually changing and adding music use python to do that.
4+
5+
-> Cause without Database it is very hard to maintain this offline music player,
6+
7+
### How to use
8+
9+
-> add your music into assets > music > <create_music_folder> / music files
10+
11+
-> each folder in assets > music will act as playlist.
12+
13+
-> for each music add it's relevant art cover .jpg files into assets > cover > <that_same_folder> / music file cover (with the same name as your relevant .mp3 file).
14+
15+
-> add album cover into assets > cover > album_cover folder.
16+
17+
-> Now Run `python py_based_music_player.py`
18+
19+
-> this will update the .js file of music data and use can open music.html to see the changes.
20+
21+
### Note
22+
23+
-> On first load their is default folder > which contains music to launch on first start,
24+
25+
you can change that also.

‎py_based_music_player/css/main/music.css‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
@import url('../webfonts/lato.css');
2+
3+
4+
.music-container {
5+
background-color: #00353f;
6+
width: 80%;
7+
border-radius: 15px;
8+
margin-left: 20px;
9+
box-shadow: 0 20px 20px 0 #335f6a;
10+
display: flex;
11+
padding: 20px 30px;
12+
position: relative;
13+
margin: 180px 50px 70px 50px;
14+
z-index: 10;
15+
}
16+
17+
.img-container {
18+
position: relative;
19+
width: 110px;
20+
}
21+
22+
23+
.img-container img {
24+
border-radius: 50%;
25+
border: 2px solid #00353f;
26+
object-fit: cover;
27+
height: 110px;
28+
width: inherit;
29+
position: absolute;
30+
bottom: 0;
31+
left: 0;
32+
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
33+
animation: rotate 3s linear infinite;
34+
animation-play-state: paused;
35+
}
36+
37+
.music-container.play .img-container img {
38+
animation-play-state: running;
39+
}
40+
41+
@keyframes rotate {
42+
from {
43+
transform: rotate(0deg);
44+
}
45+
46+
to {
47+
transform: rotate(360deg);
48+
}
49+
}
50+
51+
.navigation {
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
z-index: 1;
56+
}
57+
58+
.action-btn {
59+
background: transparent;
60+
border: 0;
61+
color: #93a8b3;
62+
font-size: 20px;
63+
cursor: pointer;
64+
margin: 0 20px;
65+
}
66+
67+
.action-btn.action-btn-big {
68+
color: #93a8b3;
69+
font-size: 30px;
70+
}
71+
72+
.action-btn:focus {
73+
outline: 0;
74+
}
75+
76+
.action-btn:hover {
77+
color: #000f19;
78+
text-shadow: 0 0 5px #000f19;
79+
}
80+
81+
.action-btn .repeat-active {
82+
color: #000f19;
83+
}
84+
85+
86+
.action-btn .random-active {
87+
color: #000f19;
88+
}
89+
90+
.music-info {
91+
background-color: #335f6a;
92+
border-radius: 15px 15px 0 0;
93+
position: absolute;
94+
top: 0;
95+
left: 20px;
96+
width: calc(100% - 40px);
97+
padding: 10px 10px 10px 150px;
98+
transform: translateY(0%);
99+
transition: transform 0.3s ease-in, opacity 0.3s ease-in;
100+
opacity: 0;
101+
z-index: 0;
102+
103+
}
104+
105+
.music-info #artist {
106+
color: #93a8b3;
107+
text-transform: uppercase;
108+
}
109+
110+
.music-container.play .music-info {
111+
opacity: 1;
112+
transform: translateY(-100%);
113+
}
114+
115+
.music-info h4 {
116+
margin: 0;
117+
}
118+
119+
.progress-container {
120+
background: #fff;
121+
border-radius: 5px;
122+
cursor: pointer;
123+
margin: 10px 0;
124+
height: 4px;
125+
width: 100%
126+
}
127+
128+
129+
.progress {
130+
background-color: #000f19;
131+
border-radius: 5px;
132+
height: 100%;
133+
width: 0%;
134+
transition: width 0.1s linear'
135+
}
136+
137+
.next-queue .list_item {
138+
display: flex;
139+
align-items: center;
140+
cursor: pointer;
141+
width: 100%;
142+
height: 74px;
143+
transition: 0.4s;
144+
}
145+
146+
.next-queue, li {
147+
list-style: none;
148+
padding: 0;
149+
}
150+
151+
152+
.next-queue img {
153+
width: 50px;
154+
height: 50px;
155+
margin: 0 12px 0 31px;
156+
border-radius: 50%;
157+
position: relative;
158+
opacity: 0.8;
159+
background-size: cover;
160+
border-radius: 5px;
161+
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
162+
}
163+
164+
.next-queue .info {
165+
max-width: 600px;
166+
}
167+
168+
.next-queue .info .title {
169+
color: #ffffff;
170+
font-size: 15px;
171+
font-weight: 600;
172+
}
173+
174+
.next-queue .info .artist {
175+
font-size: 13px;
176+
text-transform: uppercase;
177+
color: #8fa4af;
178+
}
179+
180+
.queue-active {
181+
border: 3px solid #fff;
182+
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
183+
padding: 20px;
184+
}
185+
186+
.next-queue .list_item {
187+
width: 80%;
188+
margin-left:10px;
189+
}

0 commit comments

Comments
 (0)