Playing BGM with MIDI on the web

i’ve been working on adding background music to the website (much like melonking.net). wavs or mp3s would take a while to load (or i’d have to decimate the audio quality- which is what melonking does), and i can’t just use a more effecient format such as opus (which is usually used in WebM, google’s foss video format) since some systems won’t be able to play it (looking at you apple). so instead, my solution was just to use midi- except modern web browser can’t play midi either.. enter midijs (not midi.js, that’s apparently an entierly different library). it was pretty easy to set up, all you do is host some midis somewhere and then do MIDIjs.play(“/Music/bgm/maniaStudiopolisAct1.mid”). i have a whole folder of midis to play at random, so i get a random number, round it so it’s not so scary. and in my case i have an array with all of the file names for the song, since i wanted to keep the song titles and not just call them BGM1, 2 , 3, and so on. if you want, you can even make another couple arrays to store metadata, like song title, artist, etc. 

there are a couple problems with background music though:

most modern browsers have autoplay off or set to “automatic”, which means audio won’t start playing until the user does something (like clicking). my site’s not very interactive though, so clicking will probably take them to another page- which means they still have to click to hear the music, since it’s per page

there’s also no easy way of detecting this using MIDIjs, since it always returns “undefined” and doesn’t throw an error.

so the only way to detect autoplay is to try to create an audiocontext yourself- and the only way to do that (as far as i know) is to play an audio file..

so for now, the testing site just has a big ‘ol banner on the front page that tells you to turn on your autoplay. it’ll be fine for the time being, but eventually when music gets added to the main site in the forseeable future i would like to have a better solution)

edit: the testing site is live!

also remix 4 sounds like absolute garbage in the default midijs soundfont I apologize

windows isn't real

 well i guess it kinda isn't real

so random discovery time:

when hyper v is enabled on windows, it runs underneath windows. as in, its not just part of the kernel, it replaces it.. so when windows is running on a machine with hyper-v enabled, the "host" is actually a special vm that has direct access to all of the I/O and PCIe. so no code running in windows (other than hyper v itself) runs on the bare metal when hyper v is on.

i'm probably wrong about some of this, so feel free to correct me

bebtv shenanigans

beb tv?? on your smartphone?? no way!?

so uhh yeah, that's a thing you can do now (on iOS, which is suprising)

you don't have to run webtv with this, that's just what i did

it's a bit janky since you HAVE to connect to specifically wifi to enable JIT (doesn't even have to have internet access, just have to be connected to a wifi network)

you can also use the same method to emulate games all the way up to the switch (the A15 has enough power to do so, but you have to have enough ram, so 13 pro or 14)

tutorial because:

1. Install SideStore: this is what will manage your certs, refresh them, and allow you to install ipas on device
2. (Optional) Once sidestore is installed, install live container:  (Normally without a $100 a year+ dev cert from apple you can only have up to 3 apps. LiveContainer gets around this by running the app inside of itself)
3. Install StikDebug from the app store: this is what will enable JIT
4. Open StikDebug and click connect (it may ask you to install a vpn profile- this is normal. if you don't feel comfortable doing this you can make your own loopback vpn using wireguard or StosVPN)
5. game

and if you want to run webtv for what ever funni reasons you have:

1. Install Flycast (you want the ipa)
2. Download a WebTV connection kit disc (WebTV Redialed, HackTV, etc) and import it (put it into flycast's folder)
3. StikDebug/JIT
4. Profit

this post has absolutely no reason to exist other than it can, and so it does

Note: For the HackTV image, just look for the .cdi image in the archive

GET THEM MY BEAUTIFUL INVENTION!

behold: the blog

what goes on the blog?

bloggy things

i thought blogger would be easier than writing HTML by hand for every article

cool stuff i find will go here

(the game reviews will not move for now)