Skip to content

Commit ea435cc

Browse files
cleveranucleveranu
authored
Merge pull request ssitvit#542 from cleveranu/cc
added a music player game
2 parents dd28eab + 2fe0d8b commit ea435cc

File tree

8 files changed

+186
-0
lines changed

8 files changed

+186
-0
lines changed

‎index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,14 @@ <h3 class="card__heading">Sorting Visualizer</h3>
136136
<h3 class="card__heading">Forest</h3>
137137
</div>
138138
</a>
139+
<a class="card" href="projects/Music_Player/music.html">
140+
<div class="card__background" style="background-image: url(projects/Music_Player/media/img.jpg)"></div>
141+
<div class="card__content">
142+
<p class="card__category">Music</p>
143+
<h3 class="card__heading"> Music_Player</h3>
144+
</div>
145+
</a>
146+
139147
<a class="card" href="projects/Job_Application_Form/index.html">
140148
<div class="card__background" style="background-image: url(projects/Job_Application_Form/frontpage.png)"></div>
141149
<div class="card__content">

‎projects/Music_Player/media/The Chainsmokers.jpg

107 KB
Loading

‎projects/Music_Player/media/img.jpg

191 KB
Loading

‎projects/Music_Player/media/taylor-swift-2019-new-33.jpg

1.16 MB
Loading

‎projects/Music_Player/music.css

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
*{
2+
margin: 0;
3+
padding: 0px;
4+
font-family: 'Poppins',sans-serif;
5+
box-sizing: border-box;
6+
7+
8+
}
9+
.container{
10+
width:100%;
11+
height: 100vh;
12+
background: #333;
13+
display: flex;
14+
justify-content: center;
15+
flex-wrap:wrap ;
16+
align-items: center;
17+
}
18+
.music-player
19+
{
20+
background: #ffe0e5;
21+
width: 400px;
22+
padding: 25px 35px;
23+
text-align: center;
24+
}
25+
.songimg{
26+
display: flex;
27+
justify-content: space-between;
28+
margin-bottom: 30px;
29+
}
30+
.circle{
31+
border-radius:50%;
32+
width: 40px;
33+
height: 40px;
34+
line-height: 40px;
35+
background: #fff;
36+
color:#f53192;
37+
box-shadow:0 5px 10px rgba(255,26,26,0.22);
38+
39+
40+
}
41+
.img{
42+
width: 230px ;
43+
border-radius: 50%;
44+
border: 8px solid #fff;
45+
box-shadow: 0 10px 60px rgba(255,26,26,0.22);
46+
47+
}
48+
.music-player h1{
49+
font-size: 20px;
50+
font-weight: 400;
51+
color: #333;
52+
margin-top: 20px;
53+
}
54+
.music-player p{
55+
font-size: 14px;
56+
color: #333;
57+
padding-top: 4px;
58+
59+
}
60+
61+
#progress{
62+
-webkit-appearance: none;
63+
width: 100%;
64+
height: 6px;
65+
background:#f53192 ;
66+
border-radius: 4px;
67+
cursor: pointer;
68+
margin: 40px 0;
69+
70+
}
71+
#progress::-webkit-slider-thumb{
72+
-webkit-appearance: none;
73+
background: #f53192;
74+
width:30px;
75+
height: 30px;
76+
border-radius: 50%;
77+
border: 8px solid #fff;
78+
box-shadow: 0 5px 5px rgba(255,26,26,0.22);
79+
}
80+
.control{
81+
display: flex;
82+
justify-content: center;
83+
84+
align-items: center;
85+
}
86+
.control div{
87+
width: 60px;
88+
height: 60px;
89+
margin:20px;
90+
background: #fff;
91+
display: inline-flex;
92+
align-items:center ;
93+
justify-content: center;
94+
border-radius: 50%;
95+
color: #f53192;
96+
box-shadow: 0 10px 20px rgba(255,26,26,0.22);
97+
cursor: pointer;
98+
}
99+
.control div:nth-child(2)
100+
{
101+
transform: scale(1.5);
102+
background: #f53192;
103+
color:#fff;
104+
}

‎projects/Music_Player/music.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="music.css" media="screen" />
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>The Music Player</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="music-player">
12+
<!-- <div class="tittle"><i class="fa-solid fa-angle-down"></i> Now Playing<i class="fa-solid fa-ellipsis"></i></div> -->
13+
<div class="songimg">
14+
<div class="circle">
15+
<i class="fa-solid fa-angle-right"></i>
16+
</div>
17+
<div class="circle">
18+
<i class="fa-solid fa-bars"></i>
19+
</div>
20+
</div>
21+
22+
<img src="media/img.jpg" class="img"/>
23+
<h1>Steal My Girl</h1>
24+
<p>One Direction</p>
25+
<audio id="song">
26+
<source src="songs/steal my girl.mpeg" type="audio/mpeg">
27+
</audio>
28+
29+
<input type="range" value="0" id="progress">
30+
<div class="control">
31+
<div><i class="fa-solid fa-backward"></i></div>
32+
<div onclick="playPause()"><i class="fa-solid fa-play" id="ctrlIcon"></i></div>
33+
<div><i class="fa-solid fa-forward"></i></div>
34+
</div>
35+
</div>
36+
<script
37+
src="https://kit.fontawesome.com/45511a6a05.js"crossorigin="anonymous"></script>
38+
<script src="script.js"></script>
39+
</body>
40+
</html>

‎projects/Music_Player/script.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
let progress=document.getElementById("progress");
2+
let song=document.getElementById("song");
3+
let ctrlIcon=document.getElementById("ctrlIcon");
4+
5+
song.onloadedmetadata=function(){
6+
progress.max=song.duration;
7+
progress.value=song.currentTime;
8+
9+
}
10+
function playPause(){
11+
if(ctrlIcon.classList.contains("fa-pause"))
12+
{
13+
song.pause();
14+
ctrlIcon.classList.remove("fa-pause");
15+
ctrlIcon.classList.add("fa-play");
16+
}
17+
else{
18+
song.play();
19+
ctrlIcon.classList.add("fa-pause");
20+
ctrlIcon.classList.remove("fa-play");
21+
}
22+
}
23+
if(song.play())
24+
{
25+
setInterval(()=>{
26+
progress.value=song.currentTime;
27+
},500);
28+
}
29+
progress.onchange=function(){
30+
song.play();
31+
song.currentTime=progress.value;
32+
ctrlIcon.classList.add("fa-pause");
33+
ctrlIcon.classList.remove("fa-play");
34+
}

‎projects/Music_Player/songs/steal my girl.mpeg

8.9 MB
Binary file not shown.

0 commit comments

Comments
 (0)