SilverHawk's Rad Music Player

I know what you're thinking: "I want a rad music player on my page to play all my sick Midis while people are on my site." I was thinking it too a while back, so I decided to make one. Now, it wasn't as easy as you might think becuase most browsers (excluding Microsoft Internet Explorer) don't support playing Midi files natively, so I had to use a tool called "MIDIjs". After some few hours of work, I finally had the working player, and now you can too, cause why would I keep this to myself?

This baby pulls from a playlist of Midi files you specify and plays them in order with pause, resume, and skip features. Setting it up is as easy as adding an iframe to your site. It can be positioned anywhere you have a 128x32 pixel space. The following is an example of how it might be setup

<iframe style="position:fixed;bottom:0px;left:0px;height:32px;width:128px;border-width:0px" scrolling="no"
  src="//silverhawk.neocities.org/player.html?playlist=
  [%22//silverhawk.neocities.org/music/Beastie_Boys_-_Sabotage.mid%22,
    %22//silverhawk.neocities.org/music/Yoko_Takahashi_-_Cruel_Angel_s_Thesis.mid%22,
    %22//silverhawk.neocities.org/music/Europe_-_The_Final_Countdown.mid%22]">
            

The important things to notice are height:32px;width:128px in the style, scrolling="no", and what following ?playlist= in the url. The width and height just make sure the player isn't in an oversized iframe and scrolling="no" stops an annoying scrollbar appearing over the right of the player. The rest of the style tag is placing it in the bottom left corner, the way I have it on my site.

The playlist is defined as a GET parameter on the src of the iframe. After ?playlist= comes a JSON formated array of urls to each of the midi files in the playlist. Where there is a %22, it is an escaped quotation mark. You would create you playlist as ?playlist=[%22url_to_first_midi%22,%22url_to_second_midi%22,...,%22url_to_last_midi%22]. While I haven't tested it, I believe relative urls will attempt to pull from my site instead of the site it's embeded in, hence the need for //your_site.neocities.org/ at the beggining.