Skip to content

Commit 5765918

Browse files
thinkswellthinkswell
authored
Merge pull request #133 from 0Verlord-41/MiniMusicPlayer-0Verlord-41-branch
MiniMusicPlayer
2 parents cb2a8be + bf8ccf8 commit 5765918

7 files changed

+188
-0
lines changed

‎MiniMusicPlayer/0Verlord-41/Russ - Best On Earth ft. BIA.mp3‎

1.24 MB
Binary file not shown.

‎MiniMusicPlayer/0Verlord-41/Russ - Civil War.mp3‎

1.14 MB
Binary file not shown.

‎MiniMusicPlayer/0Verlord-41/Shawn Mendes - There s Nothing Holdin Me Back.mp3‎

8.09 MB
Binary file not shown.

‎MiniMusicPlayer/0Verlord-41/Taylor Swift - Love Story(music.naij.com).mp3‎

3.79 MB
Binary file not shown.

‎MiniMusicPlayer/0Verlord-41/Tiësto & KSHMR feat. Vassy - Secrets (Official Music Video).mp3‎

3.37 MB
Binary file not shown.

‎MiniMusicPlayer/0Verlord-41/musicworld.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<html>
2+
3+
<title>Music world</title>
4+
<style>
5+
6+
.title{
7+
text-align: center;
8+
}
9+
body{
10+
background-color: mistyrose;
11+
}
12+
.app{
13+
justify-content: space-around;
14+
display: flex;
15+
align-items: center;
16+
flex-direction: column;
17+
height:100vh;
18+
19+
}
20+
.pads{
21+
display: flex;
22+
width: 100%;
23+
}
24+
.pads > div{
25+
height:150px;
26+
width:100px;
27+
flex:1;
28+
29+
}
30+
.pad1{
31+
background: #60d394;
32+
}
33+
.pad2{
34+
background: #c060d3;
35+
36+
}
37+
.pad3{
38+
background: #d36060;
39+
40+
}
41+
.pad4{
42+
background: #d3d160;
43+
44+
}
45+
.pad5{
46+
background: #c060d3;
47+
48+
}
49+
button{
50+
box-sizing: border-box;
51+
appearance: none;
52+
53+
border: 2px solid $red;
54+
border-radius: 0.6em;
55+
color: $red;
56+
cursor: pointer;
57+
display: flex;
58+
59+
font-size: 1rem;
60+
font-weight: 500;
61+
line-height: 1;
62+
margin: 14px;
63+
padding:15px 20px 15px 20px;
64+
65+
text-align: center;
66+
text-transform: uppercase;
67+
font-family: 'Montserrat', sans-serif;
68+
69+
width: 80px;
70+
}
71+
button:hover{
72+
box-shadow: 0 0 10px 0 $blue inset, 0 0 10px 4px $blue;
73+
}
74+
.add{
75+
background-color: blue;
76+
}
77+
.visual >div{
78+
border-radius: 50%;
79+
position: absolute;
80+
width:50px;
81+
height:50px;
82+
}
83+
@keyframes jump {
84+
0%{
85+
bottom:50%;
86+
left:20%;
87+
}
88+
50%{
89+
bottom:50%;
90+
left:50%;
91+
}
92+
100%{
93+
bottom:50%;
94+
left:80%;
95+
}
96+
97+
}
98+
header{
99+
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
100+
width:100%;
101+
}
102+
.play{
103+
text-align: center;
104+
}
105+
.pla{
106+
text-align: center;
107+
}
108+
</style>
109+
110+
111+
<body>
112+
<div class="app">
113+
<header>
114+
<div class="title"><h1>Music world</h1></div>
115+
</header>
116+
<div class="aud"><p>tap to play music</p></div>
117+
<div class="visual"></div>
118+
<div class="pads">
119+
<div class="pad1">
120+
<button class="play">play</button>
121+
<button class="pla">pause</button>
122+
<audio class="sound" src="Russ - Civil War.mp3"></audio>
123+
</div>
124+
<div class="pad2">
125+
<button class="play">play</button>
126+
<button class="pla">pause</button>
127+
<audio class="sound" src="Russ - Best On Earth ft. BIA.mp3"></audio>
128+
</div>
129+
<div class="pad3">
130+
<button class="play">play</button>
131+
<button class="pla">pause</button>
132+
<audio class="sound" src="Taylor Swift - Love Story(music.naij.com).mp3"></audio></div>
133+
<div class="pad4">
134+
<button class="play">play</button>
135+
<button class="pla">pause</button><audio class="sound" src="Shawn Mendes - There s Nothing Holdin Me Back.mp3"></audio>
136+
</div>
137+
<div class="pad5">
138+
<button class="play">play</button>
139+
<button class="pla">pause</button><audio class="sound" src="Tiësto & KSHMR feat. Vassy - Secrets (Official Music Video).mp3"></audio>
140+
</div>
141+
142+
</div>
143+
</body>
144+
<script src="script1.js"></script>
145+
</html>

‎MiniMusicPlayer/0Verlord-41/script1.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
window.onload=fun;
2+
3+
function fun(){
4+
const sound=document.querySelectorAll(".sound");
5+
const visual=document.querySelector(".visual");
6+
const pads=document.querySelectorAll(".play");
7+
const pause=document.querySelectorAll(".pla");
8+
var color=[
9+
"#60d394","#c060d3","#d36060","#d3d160","#c060d3"
10+
];
11+
12+
pads.forEach((v,index)=>{
13+
console.log(index);
14+
v.addEventListener('click',function(){
15+
sound[index].currentTime=0;
16+
sound[index].play();
17+
v.classList.toggle('pow');
18+
bubbles(index);
19+
});
20+
21+
});
22+
function bubbles(index){
23+
const vis=document.createElement("div");
24+
visual.appendChild(vis);
25+
26+
vis.style.backgroundColor=color[index];
27+
vis.style.animation="jump 1s infinite";
28+
vis.addEventListener("animationend",function(){
29+
visual.removeChild(this);
30+
31+
});
32+
}
33+
pause.forEach((v,index)=>{
34+
v.addEventListener('click',function(){
35+
36+
sound[index].pause();
37+
38+
v.classList.toggle('add');
39+
});
40+
41+
42+
});
43+
}

0 commit comments

Comments
 (0)