6 ms·

MIDI.js - Sequencing in Javascript

87 points by GuiA 14y ago

willlll 14y ago
Since tim cook removed midi support in mt lion, I've been looking for ways to get the midis that play on my professional homepage to work again. I tried this one and it's cool, but as far as I was able to use it, it was limited to just one instrument.
- eclipxe 14y ago
  >midis that played on my professional homepage We're partying like it's 1995 again!
  - mischanix 14y ago
    You should actually check it out; even the title marquees.
    - j_s 14y ago
      For the lazy: http://bitfission.com/ http://bitfission.com/ 1995 might be a bit generous; fun!
- nodata 14y ago
  <blink>tim cook personally removed midi support in mt lion</blink>
- agumonkey 14y ago
  That's some very tasty jpeg compression you got here. ps: the github stat troll made me chuckle. https://github.com/will https://github.com/will
- mratzloff 14y ago
  Nice! I did the same thing for my homepage: http://www.matthewratzloff.com http://www.matthewratzloff.com I created a soundless MIDI file just so it would load the control. :-)
jasongaya 14y ago
same here
illyism 14y ago
The examples are pretty impressive. Would be a great way to learn piano with a bit more work. https://github.com/qiao/euphony https://github.com/qiao/euphony and http://mudcu.be/piano/ http://mudcu.be/piano/ And Simon Says: http://labs.uxmonk.com/simon-says/ http://labs.uxmonk.com/simon-says/
gbelote 14y ago
I'm seeing an indefinite "Loading: Soundfont..." spinner. Looking at the console, it looks like a few assets take a long time to download and then fail before finishing. Could it be your server is serving assets itself and killing the connection after ~10s?
thewarrior 14y ago
Dosent work . Shows Loading Soundfont indefinitely ..
hkdobrev 14y ago
I don't hear anything on Chrome for Android.
klaustopher 14y ago
Very nice, and the soundfont sounds a lot better than the stuff that comes with most operating systems
mgallivan 14y ago
I've recently used this library to make an ear trainer app (http://www.earbuilder.com http://www.earbuilder.com). It's pretty easy to use and the creator responds really quickly - the only issue I have at the moment is playing sounds simultaneously within Chrome.
- groovy2shoes 14y ago
  This is really cool! I had some trouble with the harmonic setting at first (in Chrome), but after refreshing the page it seems to work fine. It's crazy how much harder it got once that setting went on.
  - mgallivan 14y ago
    Thanks - chords in Chrome has been an issue a few people are having. I'm still looking for an answer. :D
mhuffman 14y ago
This is fantastic! A Javascript library that can transport you back to 1996 Geocities! Seriously, it is nice to start seeing sound tools for Javascript. Javascript, CSS, and HTML5 were to be the great Flash Slayers, but the things that Flash are "good" at, Video and Sound, seem the be last on the list of items to be implemented.
shocks 14y ago
Holy shit, this is really really awesome! I have so many awesome ideas in my head right now. Thank you!!! :D
spyder 14y ago
also: http://www.multiplayerpiano.com/ http://www.multiplayerpiano.com/
iso-8859-1 14y ago
Sounds absolutely terrible on Firefox 18.0.2/Linux... I think it's sad MIDI isn't in the Web Audio API, the code for 95% of this is written already, just not accessible. The web really needs to reinvent everything in JavaScript I guess.
- wuest 14y ago
  Yup; crackles abound. I pulled it up in Chromium 24.0.1312.70 to see if the sound was any better, and (most of) the crackles are gone. When > 4 notes play you still get a bit of crackle, but it's far, far better. It's sad that everything HAS to be re-invented, but I am frequently excited to see what can be done with ES5. I'm eager to see what ES6 brings us.
markwong 14y ago
still loading ... after 10 minutes.
DennisP 14y ago
This page really needs to show the title and composer of the song it's playing.
kevincennis 14y ago
Wow @ http://mudcu.be/midi-js/js/MusicTheory.Synesthesia.js http://mudcu.be/midi-js/js/MusicTheory.Synesthesia.js. That's super interesting. Looks like it came from here: http://rhythmiclight.com/archives/ideas/colorscales.html http://rhythmiclight.com/archives/ideas/colorscales.html One of the most disappointing things about my time at Berklee was that I never met anyone with Synesthesia.
leviathant 14y ago
I see a lot of jokes about the mid-90s, Geocities, & by extension the Crescendo plugin, but that comes from a misunderstanding of what MIDI is. It's a set of instructions, not a sound format. The awful music you might associate with MIDI was your crappy soundcard interpreting note instructions. When you send those MIDI instructions to a more capable device, the results can be much better. Where this is exciting is not in that you can embed background music in a web page without the bandwidth required of compressed audio, so much as that it is a step toward further opening up the realm of building interfaces for professional musical instruments (and not so professional musical instruments). Anecdote time: In the late 90s, I'd bought a Roland drum machine that I felt had a really horrible programming interface, and I wanted to put my budding programming skills to use and build a nice visual interface that emulated the more intuitive devices from the 80s - and I had no idea where to start. Fast forward to a couple of years ago, and in the heat of the "HTML5 can do anything Flash does" debate, I decided to try emulating one of my drum machines using only HTML5 & CSS - http://bitrotten.com/dr110/ http://bitrotten.com/dr110/ - because while I felt it was impossible to do something like http://www.audiotool.com/ http://www.audiotool.com/ in HTML/JS/CSS, I wanted to put my money where my mouth was. (Result: Javascript timing is horrrrrible, audio handling is a work in progress, playback is inconsistent between browsers... Flash still wins by a very long mile on this front) But aside from the audio, I felt I could actually do a decent job of building out an interface. I guess the point I'm getting at is that in the coming years, not only will audio improve, but with the ability to output MIDI, a very accessible set of free tools (as in, a text editor, and a web browser) means that fewer people will experience the frustration I had over 15 years ago when I wanted to roll-my-own interface for external music hardware. Having said that, I think that solid timing will prove to be a formidable foe, particularly in a realm where you still have holdouts from the DIN SYNC era who say MIDI isn't responsive enough.

87 points by GuiA 14y ago

Since tim cook removed midi support in mt lion, I've been looking for ways to get the midis that play on my professional homepage to work again. I tried this one and it's cool, but as far as I was able to use it, it was limited to just one instrument.

eclipxe 14y ago
>midis that played on my professional homepage We're partying like it's 1995 again!
- mischanix 14y ago
  You should actually check it out; even the title marquees.
  - j_s 14y ago
    For the lazy: http://bitfission.com/ http://bitfission.com/ 1995 might be a bit generous; fun!
nodata 14y ago
<blink>tim cook personally removed midi support in mt lion</blink>
agumonkey 14y ago
That's some very tasty jpeg compression you got here. ps: the github stat troll made me chuckle. https://github.com/will https://github.com/will
mratzloff 14y ago
Nice! I did the same thing for my homepage: http://www.matthewratzloff.com http://www.matthewratzloff.com I created a soundless MIDI file just so it would load the control. :-)

jasongaya 14y ago

same here

illyism 14y ago

The examples are pretty impressive. Would be a great way to learn piano with a bit more work. https://github.com/qiao/euphony https://github.com/qiao/euphony and http://mudcu.be/piano/ http://mudcu.be/piano/ And Simon Says: http://labs.uxmonk.com/simon-says/ http://labs.uxmonk.com/simon-says/

gbelote 14y ago

I'm seeing an indefinite "Loading: Soundfont..." spinner. Looking at the console, it looks like a few assets take a long time to download and then fail before finishing. Could it be your server is serving assets itself and killing the connection after ~10s?

thewarrior 14y ago

Dosent work . Shows Loading Soundfont indefinitely ..

hkdobrev 14y ago

I don't hear anything on Chrome for Android.

klaustopher 14y ago

Very nice, and the soundfont sounds a lot better than the stuff that comes with most operating systems

mgallivan 14y ago

I've recently used this library to make an ear trainer app (http://www.earbuilder.com http://www.earbuilder.com). It's pretty easy to use and the creator responds really quickly - the only issue I have at the moment is playing sounds simultaneously within Chrome.

groovy2shoes 14y ago
This is really cool! I had some trouble with the harmonic setting at first (in Chrome), but after refreshing the page it seems to work fine. It's crazy how much harder it got once that setting went on.
- mgallivan 14y ago
  Thanks - chords in Chrome has been an issue a few people are having. I'm still looking for an answer. :D

mhuffman 14y ago

This is fantastic! A Javascript library that can transport you back to 1996 Geocities! Seriously, it is nice to start seeing sound tools for Javascript. Javascript, CSS, and HTML5 were to be the great Flash Slayers, but the things that Flash are "good" at, Video and Sound, seem the be last on the list of items to be implemented.

shocks 14y ago

Holy shit, this is really really awesome! I have so many awesome ideas in my head right now. Thank you!!! :D

spyder 14y ago

also: http://www.multiplayerpiano.com/ http://www.multiplayerpiano.com/

iso-8859-1 14y ago

Sounds absolutely terrible on Firefox 18.0.2/Linux... I think it's sad MIDI isn't in the Web Audio API, the code for 95% of this is written already, just not accessible. The web really needs to reinvent everything in JavaScript I guess.

wuest 14y ago
Yup; crackles abound. I pulled it up in Chromium 24.0.1312.70 to see if the sound was any better, and (most of) the crackles are gone. When > 4 notes play you still get a bit of crackle, but it's far, far better. It's sad that everything HAS to be re-invented, but I am frequently excited to see what can be done with ES5. I'm eager to see what ES6 brings us.

markwong 14y ago

still loading ... after 10 minutes.

DennisP 14y ago

This page really needs to show the title and composer of the song it's playing.

kevincennis 14y ago

Wow @ http://mudcu.be/midi-js/js/MusicTheory.Synesthesia.js http://mudcu.be/midi-js/js/MusicTheory.Synesthesia.js. That's super interesting. Looks like it came from here: http://rhythmiclight.com/archives/ideas/colorscales.html http://rhythmiclight.com/archives/ideas/colorscales.html One of the most disappointing things about my time at Berklee was that I never met anyone with Synesthesia.

leviathant 14y ago

I see a lot of jokes about the mid-90s, Geocities, & by extension the Crescendo plugin, but that comes from a misunderstanding of what MIDI is. It's a set of instructions, not a sound format. The awful music you might associate with MIDI was your crappy soundcard interpreting note instructions. When you send those MIDI instructions to a more capable device, the results can be much better. Where this is exciting is not in that you can embed background music in a web page without the bandwidth required of compressed audio, so much as that it is a step toward further opening up the realm of building interfaces for professional musical instruments (and not so professional musical instruments). Anecdote time: In the late 90s, I'd bought a Roland drum machine that I felt had a really horrible programming interface, and I wanted to put my budding programming skills to use and build a nice visual interface that emulated the more intuitive devices from the 80s - and I had no idea where to start. Fast forward to a couple of years ago, and in the heat of the "HTML5 can do anything Flash does" debate, I decided to try emulating one of my drum machines using only HTML5 & CSS - http://bitrotten.com/dr110/ http://bitrotten.com/dr110/ - because while I felt it was impossible to do something like http://www.audiotool.com/ http://www.audiotool.com/ in HTML/JS/CSS, I wanted to put my money where my mouth was. (Result: Javascript timing is horrrrrible, audio handling is a work in progress, playback is inconsistent between browsers... Flash still wins by a very long mile on this front) But aside from the audio, I felt I could actually do a decent job of building out an interface. I guess the point I'm getting at is that in the coming years, not only will audio improve, but with the ability to output MIDI, a very accessible set of free tools (as in, a text editor, and a web browser) means that fewer people will experience the frustration I had over 15 years ago when I wanted to roll-my-own interface for external music hardware. Having said that, I think that solid timing will prove to be a formidable foe, particularly in a realm where you still have holdouts from the DIN SYNC era who say MIDI isn't responsive enough.