JSFiddle - React, Tailwind, and code Playground

by alexybaddie

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.40/Tone.js"></script>
<script src="github.com/carter-thaxton/midi-file"></script>
<script src="https://unpkg.com/@tonejs/midi"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <center>
      <div class="multiple-color-module">

        <div class="color-amount" style="width:410px;">
          <center>How many colors do you want:
            <select>
              <option id="twocolor">2 Colors</option>
              <option id="threecolor">3 Colors</option>
            </select></center>
        </div>

        <div class="importmidicolor">
          <!--    <form action="/action_page.php"> -->
          <input type="file" id="MidiUpload" name="filename" accept="audio/mid">
          <button onclick="submit()" type="submit">Submit</button>

          <!-- Add icon library -->
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

          <button class="btn"><i class="fa fa-download"></i> Download</button>
          <!--  </form> -->
          <!--  <text>Success!</text> -->
        </div>

        <div id="Progress">
          <div id="MidiBar"></div>
        </div>
      </div>
    </center>
  </body>

</html>

CSS

#myProgress {
  width: 410px;
  background-color: lightgrey;
}

#myBar {
  width: 0%;
  height: 15px;
  background-color: #FF8899;
}

JavaScript

function editMidiChannels() {

  var twocolors = document.getElementById("twocolor");
  var threecolors = document.getElementById("threecolor");

  if (threecolors) {

    for (let i = 0; i < 3; i++) {
      // if "3 Colors" is selected, it will change first note, second note and then the third note to different tracks each. 
      // After that it will loop again and do the same thing but for the next notes.
    }
  } else if (twocolors) {

    for (let i = 0; i < 2; i++) {
      // if "2 Colors" is selected, it will change first note and then the second note to different tracks each. 
      // After that it will loop again and do the same thing but for the next notes.
    }
  }
	
  
  // CODE FROM MIDI LIBRARY BELOW
  
  
  // load a midi file in the browser
  const midi = await Midi.fromUrl("path/to/midi.mid")
  //the file name decoded from the first track
  const name = midi.name
  //get the tracks
  midi.tracks.forEach(track => {
    //tracks have notes and controlChanges

    //notes are an array
    const notes = track.notes
    notes.forEach(note => {
      //note.midi, note.time, note.duration, note.name
    })

    //the control changes are an object
    //the keys are the CC number
    track.controlChanges[64]
    //they are also aliased to the CC number's common name (if it has one)
    track.controlChanges.sustain.forEach(cc => {
      // cc.ticks, cc.value, cc.time
    })

    //the track also has a channel and instrument
    //track.instrument.name
  })
}




var i = 0;

function submit() {
  var MidiFile = document.getElementById("MidiUpload");
  if (MidiFile.value != "") {
    if (i == 0) {
      i = 1;
      var elem = document.getElementById("MidiBar");
      var width = 1;
      var id = setInterval(frame, 10);

      function frame() {
        if (width >= 100) {
          clearInterval(id);
          i = 0;
        } else {
          width++;
          elem.style.width = width + "%";
        }
      }
    }
  } else {
    alert("You need to...