Play multiple audio files loaded by user with Tone.js

I am trying to create a simple upload page where user can select multiple local audio file and play it. For hour, I’m not uploading this files to server, just want to play these multiple files with Tone.js Web Audio framework. I’m sill learning, so possibily i made up a frankstein code.

I have an array of these files locaded in “tracks”, when one or more files are uploaded it’ll create a new div that contains the play button. I’m usign P5.js library too. That’s the code:

const inpFile = document.getElementById("input-file");
const bttUpload = document.getElementById("upload-btt");
let tracks = [];
let tracksLength = tracks.length;

window.AudioContext = window.AudioContext || window.webkitAudioContext;
let context = new window.AudioContext();
let trackSource;

function setup() {
  createCanvas(400, 400);
  uploadTrack();
}

function draw() {
  background(220);
}

function uploadTrack() {
  bttUpload.addEventListener("click", function() {
    if (inpFile.length == 0) {
      alert("");
    } else {
      tracks.push.apply(tracks, inpFile.files);
      console.log(tracks);
      tracksDiv();
    }
  });
  
}

function tracksDiv() {
  let newTrackDiv;
  let trackSection = document.getElementById('tracks');
  for (let i = 0; i <= tracks.length; i++) {
    newTrackDiv = document.createElement('div');
    newTrackDiv.id = "tracks" + i; 
    newTrackDiv.className = 'track-div';
    newTrackDiv.innerHTML = tracks[i];
    trackSection.appendChild(newTrackDiv);

    let bttPlayTracks = document.createElement('input');
    bttPlayTracks.type = "button";
    bttPlayTracks.innerHTML = tracks[i];
    newTrackDiv.appendChild(bttPlayTracks);

    bttPlayTracks.addEventListener("click", function() {
      inpFile.addEventListener('change', selectedTrack, false);
      if (tracks[i].state == "started") {
        Tone.Transport.stop();
      } else if (tracks[i].state == "stopped") {
        Tone.Transport.start();
      }
    });
  }
}

function playSoundTrack(arraybuffer) {
  context.decodeAudioData(arraybuffer, function(buf) {
    trackSource = new Tone.BufferSource();
    trackSource.connect(context).toDestination();
    trackSource.buffer = buf;
    trackSource.start(0);
  });
}

function selectedTrack(evt) {
  for (let i = 0; i <= tracks.length; i++) {
    tracks[i] = evt.target.files;
    playFileTrack(tracks[i]);
  }
}

function playFileTrack(file) {
  let reader = new FileReader();

  reader.addEventListener('load', function() {
    playSoundTrack(e.target.result);

  });
  reader.readAsArrayBuffer(file);
}
<!DOCTYPE html><html lang="PT-BR"><head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <!-- P5.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    
    <!--Tone.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.32/Tone.js" integrity="sha512-USKCQh+O8BX/a2K06xPNTwduhmQvN/m9FhkR7PRysCRlPoqIItl7Qz3xVTZC/oIHe6g5XvnLHDUgGpRMZZTmFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  </head>
  <body>
    <div id="container">
      <nav class="navbar">
        <input type="file" id="input-file" name="upload-btt" multiple></input>
        <button id="upload-btt" name="upload-btt">upload</button>
      </nav>

      <div id="tracks"></div>
    </div>
    
    <script src="/JS/sketch.js"></script>
</body>
</html>

At the moment, this isn’t playing anything, but I want to know more how to proceed with it.