Css animation bars

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css animation bars</title>
    <style>

    .clone {
      position: absolute;
      top: 10px;
      left: 10px;
      text-decoration: none;
      background-color: red;
      width: 150px;
      text-align: center;
      color: snow;
      font-family: arial black;
      padding: 5px 20px;
    }

  container {
  position: relative;
  width: 600px;
  margin: 100px auto;
  display: block;
}
audio {
  position: absolute;
  left: 40px;
  bottom: 0px;
  border: 1px solid red;
  outline: none;
  height: 40px;
  background-color: rgba(128, 128, 128, 0.1);
}
.box {
  position: absolute;
  left: 0;
  bottom: 50px;
  display: none;
}
span {
  position: absolute;

  left: 360px;
  top: -40px;
  font-size: 20px;
  font-family: arial black;
}

#_1 {
  top: 40px;
  height: 10px;
  width: 5px;
  position: absolute;
  background-color: red;
  animation: foo 1s linear infinite;
}
#_2 {
  left: 7px;
  top: 40px;
  height: 10px;
  width: 5px;
  position: absolute;
  background-color: green;
  animation: fii 1s linear infinite 0.1s;
}
#_3 {
  left: 13px;
  top: 40px;
  height: 10px;
  width: 5px;
  position: absolute;
  background-color: navy;
  animation: fee 1s linear infinite 0.5s;
}

#_4 {
  left: 19px;
  top: 40px;
  height: 10px;
  width: 5px;
  position: absolute;
  background-color: maroon;
  animation: faa 1s linear infinite 0.8s;
}

#_5 {
  left: 25px;
  top: 40px;
  height: 10px;
  width: 5px;
  position: absolute;
  background-color: orange;
  animation: fuu 1s linear infinite 0.3s;
}

@keyframes foo {
  50% {
    top: 10px;
    height: 40px;
  }
}
@keyframes fii {
  50% {
    top: 10px;
    height: 40px;
  }
}
@keyframes fee {
  50% {
    top: 10px;
    height: 40px;
  }
}

@keyframes faa {
  50% {
    top: 10px;
    height: 40px;
  }
}

@keyframes fuu {
  50% {
    top: 10px;
    height: 40px;
  }
}


    </style>
</head>
<body>

    <container>
        <box class='box'>
          <div id='_1'></div>
          <div id='_2'></div>
          <div id='_3'></div>
          <div id='_4'></div>
          <div id='_5'></div>
        </box>
        <audio id='audio' src='https://1xpto.netlify.app/audio/bass.mp3' controls></audio>
        <span id='sp'>Status OFF</span>
      </container>


  <a class='clone' title="Subscribe and hit the notification bell for more updates. It's free." href='https://www.youtube.com/channel/UCqLpDK0eOsG1eEeF9jOUZkw'>SUBSCRIBE</a>


    <script>


               box = document.getElementsByClassName("box")[0];

audio.onplay = () => {
  foo();
sp.innerHTML='Status ON';
};

audio.onended = () => {
  sortir();
sp.innerHTML='Status OFF';
};

audio.ontimeupdate = () => {
  if (audio.paused) {
    sortir();
sp.innerHTML='Status OFF';
  }
};

function foo() {
  box.style.display = "block";
}

function sortir() {
  box.style.display = "none";
}


    </script>
</body>
</html>