Audio animation bars ( Javascript )

<!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>Audio animation bars ( Javascript )</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;
    }

    div {
      display: none;
      height: 1px;
      width: 5px;
      position: relative;
      transform-origin: left top;
    }

    container {
      position: relative;
      width: 600px;
      margin: 100px auto;
      display: block;
    }

    box {
      position: absolute;
      left: 0;
      bottom: -14px;
      width: 50px;
      transform: rotateX(180deg);
    }

    audio {
      position: absolute;
      left: 50px;
      bottom: 0px;
      border: 1px solid red;
      outline: none;
      height: 30px;
      background-color: rgba(128, 128, 128, 0.1);
    }

    span {
      position: absolute;
      left: 370px;
      top: -30px;
      font-size: 20px;
      font-family: arial black;
    }
  </style>
</head>

<body>
  <container>
    <box>
      <div style='background-color:navy'></div>
      <div style='background-color:green'></div>
      <div style='background-color:orange'></div>
      <div style='background-color:red'></div>
      <div style='background-color:maroon'></div>
    </box>
    <audio id='audio' src='https://1xpto.netlify.app/audio/audio2.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>
    foo = document.getElementsByTagName('div');
    a = 0;
    audio.onplay = function() {
      for (i = 0; i < foo.length; i++) {
        foo[i].style.display = 'inline-block';
        audio.play();
         sp.innerHTML='Status ON';
      }
    }
    audio.onended = () => {
      for (i = 0; i < foo.length; i++) {
        foo[i].style.display = 'none';
         sp.innerHTML='Status OFF';
      }
    }
    audio.ontimeupdate = () => {
      if (audio.paused) {
        for (i = 0; i < foo.length; i++) {
          foo[i].style.display = 'none';
         sp.innerHTML='Status OFF';
        }
      }
    }

    function f() {
      setInterval(() => {
        var x = Math.floor((Math.random() * 40) + 1);
        foo[a].style.transform = 'scaleY(' + x + ')';
        a++;
        if (a == foo.length) {
          a = 0;
        }
      }, 100);
    }
    f();
  </script>

</body>

</html>