├── song.mp3
├── images
├── music.jpg
└── music2.png
├── logic.js
├── index.html
└── style.css
/song.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Music-Player/HEAD/song.mp3
--------------------------------------------------------------------------------
/images/music.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Music-Player/HEAD/images/music.jpg
--------------------------------------------------------------------------------
/images/music2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Music-Player/HEAD/images/music2.png
--------------------------------------------------------------------------------
/logic.js:
--------------------------------------------------------------------------------
1 | const progress = document.getElementById('progress');
2 | const img = document.getElementById('music-img');
3 | const play = document.getElementById('play');
4 | const song = document.getElementById('song');
5 |
6 |
7 | song.onloadedmetadata = function () {
8 |
9 | play.classList.remove("fa-pause");
10 | play.classList.add("fa-play");
11 | progress.max = song.duration;
12 | progress.value= song.currentTime;
13 |
14 | }
15 |
16 |
17 |
18 |
19 | play.addEventListener('click' , ()=>{
20 | if (play.classList.contains("fa-pause")) {
21 | song.pause();
22 | img.classList.remove("animate");
23 | play.classList.remove("fa-pause");
24 | play.classList.add("fa-play");
25 | }
26 | else
27 | {
28 | song.play();
29 | img.classList.add("animate");
30 | play.classList.remove("fa-play");
31 | play.classList.add("fa-pause");
32 |
33 | }
34 | });
35 |
36 | if (song.play()) {
37 | setInterval(() => {
38 | progress.value = song.currentTime;
39 | }, 1000);
40 |
41 |
42 | }
43 |
44 |
45 | progress.onchange = function () {
46 | song.play();
47 | song.currentTime = progress.value;
48 | play.classList.remove("fa-play");
49 | play.classList.add("fa-pause");
50 | img.classList.add("animate");
51 |
52 | }
53 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Music Player
9 |
10 |
11 |
12 |
13 |
23 |
24 |
Despasito
25 |
Fansico T. Camro Charles
26 |
27 |
28 |
29 |
30 |
36 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body::before {
8 | content: "";
9 | position: fixed;
10 | top: 0;
11 | left: 0;
12 | width: 100%;
13 | height: 100%;
14 | background: linear-gradient(135deg, #c57676, #af07f7);
15 | z-index: -1;
16 | }
17 |
18 | .container {
19 | display: flex;
20 | border-radius: 20px;
21 | flex-direction: column;
22 | border: 3px solid #ffffff;
23 | margin: 100px auto;
24 | justify-content: center;
25 | align-items: center;
26 | min-height: 200px;
27 | height: auto;
28 | width: 400px;
29 | background-color: #ffffffbe;
30 | position: relative;
31 | box-shadow: 5px 5px 5px 0px rgba(143, 141, 141, 0.75);
32 |
33 | }
34 |
35 | #right-icon,
36 | #left-icon {
37 | padding: 10px;
38 | color: #fff;
39 | position: absolute;
40 | }
41 |
42 |
43 | #left-icon {
44 | top: 10px;
45 | right: 20px;
46 | background-color: #a805f3;
47 | color: #ffffff;
48 | box-shadow: 5px 5px 5px 0px #000000bf;
49 | height: 40px;
50 | width: 40px;
51 | text-align: center;
52 | border-radius: 50%;
53 | font-size: 18px;
54 |
55 |
56 |
57 | }
58 | #right-icon {
59 | top: 10px;
60 | left: 20px;
61 |
62 | height: 40px;
63 | width: 40px;
64 | text-align: center;
65 | border-radius: 50%;
66 | font-size: 18px;
67 | background-color: #a805f3;
68 | color: #ffffff;
69 | box-shadow: 5px 5px 5px 0px #000000bf
70 | }
71 |
72 | #music-img{
73 |
74 | margin: 90px auto 20px ;
75 | width: 200px;
76 | height: 200px;
77 | border-radius: 50%;
78 | border: 8px solid #a805f3;
79 |
80 | }
81 |
82 | .animate{
83 | animation: rotate 4s linear infinite;
84 |
85 | }
86 |
87 | @keyframes rotate {
88 | 0% {
89 | transform: translate(-0%, -0%) rotate(0deg);
90 | }
91 | 100% {
92 | transform: translate(-0%, -0%) rotate(360deg);
93 | }
94 | }
95 |
96 | h2{
97 |
98 | text-align: center;
99 | font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
100 | font-weight: 400;
101 |
102 | }
103 | p{
104 |
105 | margin-top: 10px;
106 | font-size: 14px;
107 | }
108 |
109 | .controls{
110 |
111 | display: flex;
112 | justify-content: center;
113 | align-items: center;
114 | }
115 |
116 | .controls div{
117 |
118 | height: 60px;
119 | width: 60px;
120 | display: inline-flex;
121 | align-items: center;
122 | background-color: #a805f3;
123 | border-radius: 50%;
124 | color: white;
125 | margin: 20px;
126 | box-shadow: 5px 5px 5px 0px rgba(62, 62, 62, 0.75);
127 |
128 |
129 | justify-content: center;
130 | }
131 |
132 | .controls div:nth-child(2){
133 |
134 | height: 70px;
135 | width: 70px;
136 | font-size: 30px;
137 | text-align: justify;
138 | background-color: white;
139 | color: #a805f3;
140 | box-shadow: 5px 5px 5px 0px rgba(62, 62, 62, 0.75);
141 | }
142 |
143 | #progress{
144 |
145 | -webkit-appearance: none;
146 | width: 70%;
147 | height: 6px;
148 | background-color: #a805f3;
149 | cursor: pointer;
150 | border-radius: 20px;
151 | margin : 30px;
152 | }
153 |
154 | #progress::-webkit-slider-thumb{
155 |
156 | -webkit-appearance: none;
157 | background-color: #a805f3;
158 | height: 20px;
159 | width: 20px;
160 | border-radius: 50%;
161 | border: 5px solid white;
162 | box-shadow: 5px 5px 5px 0px rgba(62, 62, 62, 0.75);
163 | }
164 |
165 |
166 |
--------------------------------------------------------------------------------