Musical Wave form creation using HTML and CSS .

AUDIO WAVE FORM CREATION : - 



                                                                             In this tutorial we are going to

 create wave form that we see while music is playing . We have applied animation 

 so you will feel that musical wave form is on your screen. We are going to create

musical wave form like shown in below image. In this program note that animation-

delay property of CSS should be use smartly to achieve such animation.







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;
        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;
}


</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>
        </div>
    </div>
</body>
</html>







OUTPUT :- 







( NOTE : - While executing program you have to replace links of images , audio's  or video's in this program by your links. So take care of it ! )




Reactions