Javascript Audio localStorage

<!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>Javascript Audio localStorage</title>
  <style>


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

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

    body {
      margin: 0;
      background-color: ivory;
      overflow-x: hidden;
    }

    #box div {
      cursor: context-menu;
      background-color: moccasin;
      padding: 30px 10px;
      margin-top: 5px;
      color: maroon;
      font-size: 5vw;
      transform: scaleX(3);
      transform-origin: left;
      font-family: Arial black;
    }

    #box {
      height: 80vh;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    audio {
      border-radius: 5px;
      position: fixed;
      bottom: 30px;
      width: 80%;
      left: 10%;
      height: 40px;
      border: 1px solid;
      background-color: rgba(128, 128, 128, 0.1);
      box-shadow: 0 0 0 5px snow,
        0 0 0 10px green;
    }

    @media all and (max-width:425px) {
      audio {
        width: 100%;
        left: 0;
        box-shadow: none;
        border: none;
        border-radius: 0;
      }
    }
  </style>
</head>

<body>

  <div id='box'>
    <div>Audio 1</div>
    <div>Audio 2</div>
    <div>Audio 3</div>
    <div>Audio 4</div>
    <div>Audio 5</div>
    <div>Audio 6</div>
    <div>Audio 7</div>
  </div>

  <audio controls id='audio'></audio>

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

  <a class='sub_clone' href='https://1xpto.netlify.app/video/video sample01.mp4'>VIDEO SAMPLE</a>


  <script>
    a = 0;
    x = [
      'https://1xpto.netlify.app/audio/audio1.mp3',
      'https://1xpto.netlify.app/audio/audio2.mp3',
      'https://1xpto.netlify.app/audio/audio3.mp3',
      'https://1xpto.netlify.app/audio/audio4.mp3',
      'https://1xpto.netlify.app/audio/audio5.mp3',
      'https://1xpto.netlify.app/audio/audio6.mp3',
      'https://1xpto.netlify.app/audio/bass.mp3'
    ];
    audio.src = x[a];
    box = document.getElementById('box').children;
    document.onclick = (e) => {
      for (i = 0; i < box.length; i++) {
        if (box[i] == e.target) {
          foo = i;
          audio.src = x[foo];
          audio.play();
        }
      }
    }
    audio.onended = () => {
      box[foo].style.backgroundColor = 'moccasin';
      if (foo == x.length - 1) {
        audio.pause();
        foo = 0;
        audio.src = x[foo];
        audio.play();
      } else {
        foo++;
        audio.src = x[foo];
        audio.play();
      }
    }
    document.addEventListener('play', (e) => {
      for (i = 0; i < box.length; i++) {
        if (box[i] == e.target) {
          box[i].style.backgroundColor = 'moccasin';
        } else {
          box[foo].style.backgroundColor = 'olive';
        }
      }
    }, true);
    document.addEventListener('click', (e) => {
      for (i = 0; i < box.length; i++) {
        if (box[i] == e.target) {
          box[i].style.backgroundColor = 'olive';
        } else {
          box[foo].style.backgroundColor = 'moccasin';
        }
      }
    }, true);
    window.onbeforeunload = () => {
      localStorage.setItem('key', audio.src);
      localStorage.setItem('keyy', audio.currentTime);
      localStorage.setItem('keyfoo', foo);
    }
    onload = () => {
      audio.src = localStorage.getItem('key');
      audio.currentTime = localStorage.getItem('keyy');
      foo = localStorage.getItem('keyfoo');
      box[foo].style.backgroundColor = 'olive';
    }
  </script>
</body>

</html>