Spirits midi proof of concept

spirits_proof.js

const { ipcRenderer } = require('electron');
const { basename } = require('path');

var opts = {
  lines: 13, // The number of lines to draw
  length: 38, // The length of each line
  width: 17, // The line thickness
  radius: 45, // The radius of the inner circle
  scale: 1, // Scales overall size of the spinner
  corners: 1, // Corner roundness (0..1)
  color: '#ffffff', // CSS color or array of colors
  fadeColor: 'transparent', // CSS color or array of colors
  speed: 1, // Rounds per second
  rotate: 0, // The rotation offset
  animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
  direction: 1, // 1: clockwise, -1: counterclockwise
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  className: 'spinner', // The CSS class to assign to the spinner
  top: '50%', // Top position relative to parent
  left: '50%', // Left position relative to parent
  shadow: '0 0 1px transparent', // Box-shadow for the lines
  position: 'absolute' // Element positioning
};

var canvas = document.getElementById('canvas');
var ctx = setupCanvas(canvas);
var height = 1080;
var width = 1920;
var currentFile;
var frames = [];
var frameLength = 1000 / 24;
var filePath;

function setupCanvas (canvas) {
  var dpr = window.devicePixelRatio || 1;
  var rect = canvas.getBoundingClientRect();
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  var ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);
  return ctx;
}

function frame (lines) {
  const segment = height / lines;
  const thickness = Math.floor(segment / 2);
  let position;

  ctx.fillStyle = '#FFFFFF';
  ctx.fillRect(0, 0, width, height);
  
  for (let i = 0; i < lines; i++) {
    position = (segment * (i + 0.5));
    ctx.lineWidth = thickness;
    ctx.beginPath();
	ctx.moveTo(0, position);
	ctx.lineTo(width, position);
	ctx.stroke();
  }
}

function delay (ms) {
	return new Promise((resolve, reject) => {
		return setTimeout(resolve, ms);
	})
}

function buildNote (pitch, ms) {
	let frameCount = Math.round(ms / frameLength);
	for (let i = 0; i < frameCount; i++) {
		frames.push(pitch);
	}
}

async function build (filePath) {
	const midi = await Midi.fromUrl(filePath)
	const name = midi.name

	const msMultiplier = (60000 / parseInt(midi.header.tempos[0].bpm)) * 4;

	let pitch;
	let ms;

	frames = [];

	midi.tracks.forEach(async (track) => {
	  const notes = track.notes
	  for (let note of notes) {
	    pitch = Math.round(Tone.Frequency(note.name) / 24);
	    ms = Math.round(msMultiplier * parseFloat(note.duration));
	    await buildNote(pitch, ms);
	  }
	})
}

function hide (id) {
	const elem = document.getElementById(id);
	if (!elem.classList.contains('hide')) {
		elem.classList.add('hide');
	}
}
function show (id) {
	const elem = document.getElementById(id);
	if (elem.classList.contains('hide')) {
		elem.classList.remove('hide');
	}
}

async function render () {
	hide('form');
	show('spin');
	await build(filePath);
	console.dir(frames);
}

async function toFrame () {
	return new Promise((resolve, reject) => {
		const data = canvas.toDataURL();
	})
}

(async function main () {

	var target = document.getElementById('spin');
	var spinner = new Spin.Spinner(opts).spin(target);

	document.ondragenter = (ev) => {
		console.dir(ev.dataTransfer.types)
		//let fileName = basename(ev.dataTransfer.files[0].path);
		//console.log(fileName);
		ev.preventDefault()
	}

	document.ondragover = document.ondrop = (ev) => {
		ev.preventDefault()
	}

	document.body.ondrop = async (ev) => {
		filePath = ev.dataTransfer.files[0].path;
		hide('drop');
		show('form');
		
		ev.preventDefault()
	}
})()