JSFiddle - React, Tailwind, and code Playground

by Elguja Bogveradze

HTML

<div id="sound">
    <div id="sound-up"></div>
    <div id="sound-down"></div>
</div>

CSS

#sound-up {
    position: relative;
    top: 0;
    left: 0;
}
#sound-down {
    position: relative;
    bottom: 0;
    left: 0;
}
#sound-up #sound-up-box, #sound-down #sound-down-box {
    display: -webkit-inline-box;
    padding: 0;
}
#colored, #noncolored {
    width: 100%;
    display: table-caption;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}
#noncolored {
    background: black;
}
#colored {
    background: lightblue;
}

JavaScript

soundwave = function soundwave(w, h, speed) {
    var w = typeof w == "undefined" ? 500 : w;
    var h = typeof h == "undefined" ? 100 : h;
    var speed = typeof speed == "undefined" ? 100 : speed;
    var h2 = h / 2;
    var h20 = h / 20;
    var w2 = w / 2;
    var chartw = w / w2;
    $("#sound").height(h);
    $("#sound").width(w);

    $("#sound-up,#sound-down").height(h2);
    $("#sound-up,#sound-down").width(w);

    htmlup = '';
    htmldown = '';
    setInterval(function () {
        htmlup = '';
        htmldown = '';
        for (j = 0; j < w2; j++)

        {
            htmlup += '<div id="sound-up-box">';
            htmldown += '<div id="sound-down-box">';
            var rand = Math.floor(Math.random() * 10);
            for (f = 0; f < 10; f++) {
                if (rand > f) {
                    htmlup += '<div id="noncolored"></div>';
                } else {
                    htmlup += '<div id="colored"></div>';
                }

            }
            for (i = 10; i > 0; i--) {
                if (rand < i) {
                    htmldown += '<div id="colored"></div>';
                } else {
                    htmldown += '<div id="noncolored"></div>';
                }

            }
            htmldown += '</div>';
            htmlup += '</div>';
        }
        ///////////////////

        $("#sound #sound-up").html(htmlup);
        $("#sound #sound-down").html(htmldown);
        $("div[id='sound-up-box']").width(chartw);
        $("div[id='sound-down-box']").width(chartw);
        $("div[id='colored']").width(chartw);
        $("#sound-up #sound-up-box, #sound-down #sound-down-box").height(h2);
        $("#colored, #noncolored").height(h20);


    }, speed);
}
//      width,height,speed 
soundwave(500, 200, 100);