midi

Scribbletune exports clips as MIDI files.

As the name suggests, the midi method generates a MIDI file from its input.

import { clip, midi } from 'scribbletune';
 
const c = clip({
  notes: 'c4',
  pattern: 'x_______'
});
 
// the following will create a file called music.mid
midi(c);
 
// Alternatively, you can specify the name of the file
midi(c, 'c.mid');

Create downloadable MIDI files from the browser

Using the midi method as is in the browser (with a filename as the second parameter), will generate a download href that looks like this

http://yourDomainOrLocalhost/5f9aa791-3509-4584-81aa-656c74597e98

You can create an anchor element out of it and set it's download attribute to whatever name you'd like to give to your MIDI file.

<a href="blob:http://yourDomainOrLocalhost/5f9aa791-3509-4584-81aa-656c74597e98"
  download="music.mid">Download MIDI file
</a>

You can append this to any HTML node in your page. To change the value of the href, simply use setAttribute or href directly on the anchor element.

If you dont want this functionality, then pass null as the second argument. It will return bytes and you can wire up the download funtionality the way you like. Here is a reference you can follow:

// Sample Clip that renders the C Major scale
const c = scribble.clip({
  notes: scribble.scale('C4 major'),
  pattern: 'x'.repeat(7)
});
 
// Get hold of the bytes from the scribble.midi method
// (passing null as the second argument returns bytes)
const b = scribble.midi(c, null);
 
// https://stackoverflow.com/questions/35038884/download-file-from-bytes-in-javascript
const bytes = new Uint8Array(b.length);
for (let i = 0; i < b.length; i++) {
  const ascii = b.charCodeAt(i);
  bytes[i] = ascii;
}
 
const blob = new Blob([bytes], {type: "audio/midi"});
 
// Create a link element to be used (you can use an existing link on the page as well)
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
 
// Give your downloadable file a name
link.download = 'music.mid';
link.innerText = 'Download MIDI file';
document.body.appendChild(link);