Makestation
Universal Midi support via JavaScript in browsers - Printable Version

+- Makestation (https://makestation.net)
+-- Forum: Technical Arts (https://makestation.net/forumdisplay.php?fid=45)
+--- Forum: Web Design & Internet (https://makestation.net/forumdisplay.php?fid=62)
+--- Thread: Universal Midi support via JavaScript in browsers (/showthread.php?tid=2324)



Universal Midi support via JavaScript in browsers - SpookyZalost - February 24th, 2019

So as a Cyber Historian I figured I'd share this here with everybody.

recently I've been troubled by something, see with midi support nearly non existent a lot of old websites and designs are silent now and it's really really unfortunate because one of the cool Ideas I had for my site was to setup Midi's to play as background music... only to find out that this wasn't really possible anymore.

UNTIL NOW

It is my wonderful pleasure to introduce you to Midi.js!

see this bit of javascript actually plays midi's for you, in your browser!

I've tested it on my tablet, my phone, linux, mac OSX, windows 8.1, windows 10, and windows XP.

all working without issues!

to set it up you need to include the following.

Put this in your header:
Code:
<link rel="stylesheet" href="style.css" type="text/css" media="all">
     <script type='text/javascript' src='http://www.midijs.net/lib/midi.js'></script>

Change your <body> tag to this:
Code:
<body onload="MIDIjs.play('Location of midi file')">


do these simple changes and you can play just about any midi file as your website's background music.

you can also change the top bit to link to a local variant of midi.js if you decide to, there's no issue there.

it's not perfect, I haven't gotten it to let me load custom soundfonts yet but I'm sure I'll figure it out in due time Tongue


RE: Universal Midi support via JavaScript in browsers - Guardian - February 25th, 2019

That's a way to do it! Nice one.