Code Monkey home page Code Monkey logo

musical-desmos's Introduction

MidiJSONToDesmos

What is this API?

This API lets you use MIDI files converted to Tonejs-compatible JSON format to play music in desmos using the tone function. It allows you to play music beyond the limitations of the "hear graph" feature. This API currently supports the following features:

  • Tempo Will play the song back at the BPM set in the MIDI file, allows for timing flexability.
  • Multi-track Support Has the ability to play multiple notes at the same time, though sometimes sounds off
  • Beats Only supports up to 0.125 (1/8) beats, anything shorter may be held out too long or not played at all.
  • Help Provides data required to play automatically
  • ToneJS Compatible Compatible with any existing ToneJS MIDI data you might already have!

How to use this API?

Step 1: Open a new JavaScript instance, that supports ECMAScript 6 (ES6) features.

This can be in a browser, Deno, Node.JS, Electron, or something completely different.
As long as it supports ES6, it'll work.

Step 2. Paste or import the API.

This will allow you to use the API. Modifying the API file may be required in some contexts (eg Node.JS) to allow importing.

Step 3. Convert a MIDI file.

A good open-source MIDI editor that I use a lot is Signal, but you can use any MIDI editor you'd like. Once you have downloaded or created a MIDI file, head over to this site to convert your MIDI file to be compatible with ToneJS.

Please note, that this is NOT endorsed by ToneJS, and this API does NOT use ToneJS or any similar libraries. This API is only compatible with the ToneJS-compatible JSON-ified MIDI format, not any other ToneJS format.

Step 4. Run the API with the JSON data.

The API is one function, so you're in luck! You can simply run it like this:

var MidiJSONToDesmos = (function () {
    ...
})();

var data = MidiJSONToDesmos({
    ...
});

console.log(data.lines);
console.log(data.interval);
console.log(data.timer);
console.log(data.b);

Step 5. Copy all the lines data.

Copy the text from the lines property of the output.
Paste this directly into Desmos' Graphing Calculator.

Step 6. Update the slider for easy rewinding.

Select the variable "b". Copy data from data.b and paste it into the b<=__ (maximum value) value on the variable.
Set the minimum value to 0, and the step to 0.25 or 0.125. (We recommend 0.125!)

Step 7. Create a timer.

Press the + button, and select "ticker". Copy the text from data.timer and paste it into the Run input.
Copy the text from data.interval and paste it into the Every ___ ms input. This allows it to have the correct tempo.

Step 8. Enjoy the music!

Press the button on the ticker to start the music. Listen to it go!

Demo JSON Files

"Boku Wa Dare" by themirrazz - For Desmos MIDI JSON
Jingle Bells, Short MIDI Cover [MIDI](jingle berrs.mid) [JSON](jinnnngle belllllllllllllllllls.json)
Bad Apple by IOSYS [SHORT] Coming Soon
Never Gonna Give You Up by Rick Astley [SHORT] Coming Soon
Vandalize - ONE OK ROCK - Chorus Only Coming Soon

musical-desmos's People

Contributors

themirrazz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.