HN Explorer

19 comments

[ 3.9 ms ] story [ 62.8 ms ] thread
wilsonjohn
Love this. May I know the tech stack involved in this?
ryohey
Thank you.

For your reference

Language: TypeScript UI: React State management: MobX Deploy/Hosting: Vercel

And it uses some browser features. WebAudio is used for audio output. WebGL is used in react-pixi to render many notes faster.

catchmeifyoucan
This is soo cool!

Can I connect my midi keyboard to this as well?

chocolatkey
Considering it says "Currently only works on the desktop version of Google Chrome" it seems like that would be a feature
ryohey
Not yet. I would like to support it in the future. Thank you!
kennywinker
it "works" in firefox, but the playback is laggy and weirdly timed. very cool tho!
ryohey
Thank you! Timer related behavior may be a problem. I will investigate more.
httgp
It could be because Firefox reduced time precision to fend off fingerprinting and timing attacks. To turn it on, you’d need to set the Cross-Origin-Opener-Policy to “same-origin” and the Cross-Origin-Embedder-Policy to “require-corp”. Reference — https://developer.mozilla.org/en-US/docs/Web/API/Performance...
nwsm
I try to use Firefox on principle, but I find so many sites are slightly or significantly broken in it
natdempk
This is cool, a nice beginner or general convenience feature might be the ability to highlight some basic scales like major/minor. This would probably get people off the ground writing music that sounds good much quicker.
ryohey
Thank you. That's a good idea. I definitely want to implement it.
Kaknut
It nice! Does it support external peripherals?
ryohey
Thank you. I would like to support MIDI input / output in the future. Can you tell me about the equipment you want to use?
oxyboy
I’d love to be able to use Novation LaunchKey MIDI controllers.
gotadollar
The latency is horrendous, I use a real-time kernel to make music @3ms< you're never going to get that with a fully streaming application however, you could possibly send bigger chunks of data which interact on the client-side. It's still problematic, but bravo! Valiant effort.
nwsm
This entire application is client-side.