audiowave

by Bean Deng

HTML

<div class="background">
      <div class="audiowave"></div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.background {
    width: 100vw;
    height: 100vh;
    background-color: #193082;
}

.audiowave {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.audiowave div {
    top: 0;
    background: rgba(44, 99, 255, 0.25);
    z-index: 9;
    width: 3px;
    height: 0;
    animation: audiowave 3s infinite linear;
}

@keyframes audiowave {
    0% {
        height: 28.75%;
    }

    5% {
        height: 37.5%;
    }

    10% {
        height: 56.25%;
    }

    15% {
        height: 48.75%;
    }

    20% {
        height: 68.75%;
    }

    25% {
        height: 82.5%;
    }

    30% {
        height: 71.25%;
    }

    35% {
        height: 78.125%;
    }

    40% {
        height: 68.75%;
    }

    45% {
        height: 80.875%;
    }

    50% {
        height: 90%;
    }

    55% {
        height: 91.875%;
    }

    60% {
        height: 87%;
    }

    65% {
        height: 70%;
    }

    70% {
        height: 60%;
    }

    75% {
        height: 55%;
    }

    80% {
        height: 45%;
    }

    85% {
        height: 40%;
    }

    90% {
        height: 35%;
    }

    95% {
        height: 30%;
    }

    100% {
        height: 28.75%;
    }
}

JavaScript

/* 

Author: HADB
Date: 2019-03-24
My Blog: https://hadb.me
My GitHub: https://github.com/HADB

*/

var wavePillarCount = 100     // 柱子总数（用来调整密度）
var waveCount = 5             // 波形总数（用来调整波形数量）
var waveAnimationDuration = 3 // 单个动画秒数（与 animation-duration 一致）
var randomRate = 1            // 随机倍率，越大越随机

for (i = 0; i < wavePillarCount; i++) {
    var offset = ((i / wavePillarCount - 1) * waveCount * waveAnimationDuration) - Math.random() * randomRate;
    document.querySelector('.audiowave').innerHTML += '<div style="-webkit-animation-delay:' + offset + 's;"></div>';
}