MUSIC WAVE FORM ANIMATION AS MUSIC IS PLAYED.
This is simple web development program that will start animation as music is played and stop the animation as music is stop playing. We have used JavaScript code for adding events in our code. If you see this program carefully you will find we have designed such output with very simple logic. If you like this program then share this code with your friend and Subscribe 👍 our Blog for any latest updates.
PROGRAM SOURCE CODE :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating wave In HTML</title>
<!-------------------CSS Styling Part ----------------------------->
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main{
width: 100vw;
height: 100vh;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
#center{
width: 70vw;
height: 60vh;
display: grid;
place-items:center;
}
ul{
display: inline-flex;
}
li{
list-style-type:none;
width: 0.8rem;
height: 20rem;
background-color: #000;
margin: 1.2rem;
border-radius: 10rem;
transform-origin: bottom;
}
.k{
animation: ud 1s linear infinite;
}
@keyframes ud{
0%{
transform: scale(0);
}
50%{
transform: scale(1);
}
100%{
transform: scale(0);
}
}
#s1{
background-color:#ff0000;
animation-delay: .1s;
}
#s2{
background-color: #0000FF ;
animation-delay: .2s;
}
#s3{
background-color:rgb(2,179,32);
animation-delay: .3s;
}
#s4{
background-color: #FF00FF ;
animation-delay: .4s;
}
#s5{
background-color:#ffff;
animation-delay: .5s;
}
#s6{
background-color: #FA8072;
animation-delay: .6s;
}
#s7{
background-color: #FFFF00 ;
animation-delay: .7s;
}
#s8{
background-color:#7FFF00 ;
animation-delay: .8s;
}
audio{
display: none;
}
#btn{
margin: 3rem auto;
padding: 1rem 3rem;
text-align: center;
font-size: 2rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #fff;
background-color: blue;
cursor: pointer;
outline: none;
}
</style>
</head>
<body>
<div id="main">
<div id="center">
<ul>
<li id="s1"></li>
<li id="s2"></li>
<li id="s3"></li>
<li id="s4"></li>
<li id="s5"></li>
<li id="s6"></li>
<li id="s7"></li>
<li id="s8"></li>
</ul>
<button type="submit" id="btn">Play</button>
</div>
<audio src="../sounds/Song4.mp3" controls></audio>
</div>
<script>
song = document.querySelector('audio');
l = document.querySelectorAll('li');
b = document.getElementById('btn');
var isplaying = false;
let i;
let playmusic = () =>{
isplaying = true;
song.play();
b.innerText = "Pause";
event.target.setAttribute("title","Pause");
for(i=0; i<l.length; i++)
{
l[i].classList.add('k');
}
}
let pausemusic = () =>{
isplaying = false;
song.pause();
b.innerText = "Play";
event.target.setAttribute("title","Play");
for(i=0; i<l.length; i++)
{
l[i].classList.remove('k');
}
}
b.addEventListener("click",function(){
isplaying ? pausemusic() : playmusic();
})
</script>
</body>
</html>
