Working with MIDI files and Flash (actionscript)

date: 30 Nov, 2010, actionscript: 3 FP10, complexity: complexity level 4.2 of 5complexity level 4.2 of 5complexity level 4.2 of 5complexity level 4.2 of 5complexity level 4.2 of 5, feedback (votes): users score 4.99 of 5 (289 votes)users score 4.99 of 5 (289 votes)users score 4.99 of 5 (289 votes)users score 4.99 of 5 (289 votes)users score 4.99 of 5 (289 votes)

Too much talk

Well, as I said before I've been working in a keyboard piano where I change the pitch of one note (A440) for generating the rest of the keys (please read the interpolation article to understand more about it). So, in the Flash SWF below I did a similar keyboard, this time using 5 different waveforms playing .mid files, using up to 5 midi channels, each channel per waveform. Don't misunderstand it, This is not a General MIDI reader, it only has 5 waveforms used in 5 channels when reading .mid files. It was a very good practice, here I developed my own MIDI files reader (it was a pain, bad documentation out there) and I mixed it with some Bitmap particles animation, the entire thing taught me a lot of synchronizing audio with animation using MIDI files, check it out! feel encouraged to play your own midi files by using the last option "load locally a midi file".

Can you see how all this could be applied in the real world?

Well, some people who I work with asked to me, what is that for? Maybe this is not clear enough. This is a proof of concept; it can be used in many different scenarios where you have to deal with audio and you require control on it. For example, have you ever wonder what's the easiest way of making a guitar hero game in flash? Well using this approach it could be done very, very easily. Let's get into the code, in the example below I'm explaning how to read a midi file (one single channel) and play it back by using your own waveform sample. In this case I'm using the same waveform I used in the interpolation piano keyboard article:

Yeap, here is the source code of it.

An imported song from Fruity Loops

This is a bit more interesting approach. In this example I have done a quick song in Fruity Loops as proof of concept; the total song length is 3 minutes and 15 seconds (at the end it doesn't really matter how long it is). The important thing is how many instruments (including voices) your song uses and how complicated those instruments are; there are some VSTi and DXi instruments highly detailed that makes everything harder when exporting their samples, you have to do it manually one by one.

How does it work?

Basically you make your own song (music arrangement) by using any kind of audio software (fruity loops, cubase, logic, reason, etc...) as you do them normally and then, at the end you have to analyze and detect which parts of your song are you reusing the most, being the most specific possible for example: in a drums set how many times in your song did you use the Kick, HitHats, Toms, etc...? Everything consists in export them separately as waveforms (.wav) and assign to them a specific note in a specific MIDI channel. The same for the harmonics; piano, bass, synths... what you have to export is only one note A4 (A440) and then compose the chords through MIDI notes.

Once you have done this, you will notice that your song will sound similar to the original one (based on VSTi and DXi intrumsnets), try to include all effects applied on your instruments like reverbs, flanger, chorus, etc, when exporting waveforms. The more waveforms you use the nicer your song sounds, but also the bigger your .swf file will be at the end, so this approach may not work well on very complicated songs, normally when using acoustic instruments I prefer just use the full song as a mp3 file and forget about all this.

It really helps to save time if while you're creating a song you keep in mind that you will have to split it into small tiny parts (waveforms).

A song 3 minutes long (400KB) High Quality, Stereo

This is a very good example of exporting a song from Fruity Loops, I could make this song even 10 minutes long and it won't affect the size of my .swf file, again the important thing are the samples.

So, here we are. I made a quick song and I exported its samples with a MIDI file that plays these samples in certain order, into my SWF are (all of them 44.1KHz Stereo 112 kbps MP3)

  • synth.wav, 28.47KB
  • rhodesAMinor.wav, 39.79KB
  • rhodesAMajor.wav, 37.52KB
  • bass.wav, 7.45KB
  • flute.wav, 226.71KB this is the most expensive instrument in terms of file size
  • Kick.wav, 4.21KB
  • snare.wav, 4.54KB
  • hithat2.wav, 1.62KB
  • hithat1.wav, 2.27KB
  • clap.wav, 5.83KB

Put you headphones on and play it!

And here is the source code of it. updated on Dec 22nd, 2010 (memory management improvements)

page #1 | page #2 | page #3


A very interesting research about recording acoustics

Finally I got the chance for writing some documentation about all this MIDI files research in flash.

check the online detailed documentation Midi Files Reader
some demos midifiles examples, feel free to ask if you have any doubt.

date: 03 May 2012 - 20:46:00, published by javier
Great Work!
date: 13 Jul 2011 - 11:29:09
lol!! awesome, the MarioFortressSNES looks amazing.
date: 18 Apr 2011 - 13:18:30, published by Marc
Excellent! Thanks for sharing. . . Since we lost the Sequence Xtra for Director I've been looking for a Flash-based solution for playing and controlling MIDI. Currently using a Flash object in MAX/MSP but it's kludgy and a pain to bundle for distribution.
date: 06 Dec 2010 - 09:51:49, published by Leandro Zanol
Great article! Nice job! I'm working on some voice recognition (still freq only) games for music teaching and I'm on my college last year (2011) and doing my final work (don't know its name! :P) on the FFT and HMM algorithms... as a proof of concept too, I'll try building a voice command navigable website/app, let's see... Greetings!
date: 30 Nov 2010 - 22:56:33, published by yohami
unbelievable, x10