title: Selecting Music Folder html
body: <p>I would like to be able to select a music folder and shuffle all of the songs once on load and Have a skip button + return the song file name to the visualizer so that It can visualize each song. I'm still learning array's and for loops so I'm unsure of how to go about this. I also want to keep away from extra libraries for now because everything is already provided. Heres a code snippet of what I have so far</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
    
    var file = document.getElementById("file");
    var audio = document.getElementById("audio");
    
    file.onchange = function() {
      var files = this.files;
      audio.src = URL.createObjectURL(files[0]);
      audio.load();
      audio.play();
      var context = new AudioContext();
      var src = context.createMediaElementSource(audio);
      var analyser = context.createAnalyser();
  
      var canvas = document.getElementById("canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      var ctx = canvas.getContext("2d");
  
      src.connect(analyser);
      analyser.connect(context.destination);
  
      analyser.fftSize = 256;
  
      var bufferLength = analyser.frequencyBinCount;
      console.log(bufferLength);
  
      var dataArray = new Uint8Array(bufferLength);
  
      var WIDTH = canvas.width;
      var HEIGHT = canvas.height;
  
      var barWidth = (WIDTH / bufferLength) * 1;
      var barHeight;
      var x = 0;
  
      function renderFrame() {
        requestAnimationFrame(renderFrame);
        x = 0;
  
        analyser.getByteFrequencyData(dataArray);
  
        ctx.fillStyle = "#1b1b1b";
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
  
        for (var i = 0; i &lt; bufferLength; i++) {
          barHeight = dataArray[i];
          
          var r = 5;
          var g = 195;
          var b = 45;
  
          ctx.fillStyle = "rgb(5,195,45)"
          ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
  
          x += barWidth + 2;
        }
      }
  
      audio.play();
      renderFrame();
    };
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#file {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
  }
  
  #canvas {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  audio {
    position: fixed;
    left: 350px;
    top: 10px;
    width: calc(50% - 20px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;
    &lt;input type="file" id="file" accept="audio/*" /&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
    &lt;audio id="audio" controls&gt;&lt;/audio&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>