search

Bewelge / MIDIano

:musical_note: A JavaScript MIDI-Player/ Piano-learning webapp
https://midiano.com
125 stars 25 forks source link

MIDI keyboard not showing up. How to make it work? #53

Closed forthrin closed 4 months ago

forthrin commented 5 months ago
Bewelge commented 5 months ago

Hey there, can you

Just tested on an M1 Air and it worked fine in Firefox and Chrome. On Firefox I get a prompt that asks me if I want to allow the midiano domain to access MIDI devices. Maybe that dialog got lost somewhere? You can check if the permission is granted by clicking on the "permissions-icon" - https://support.mozilla.org/en-US/kb/site-permissions-panel

Can you also check the web console and paste it here?

Other than that I've had issues in the past where connecting the MIDI device before opening Midiano and restarting the browser solved the issue. I've also experienced browsers being weird if more than one page tries to access MIDI at the same time with only the first page that accesses it working. Solution for that is also simply restarting the browser

forthrin commented 5 months ago

Well, yes, a browser restart (AKA "The Swede Button") got the MIDI device recognized by the application.

(The keyboard was showing in macOS MIDI devices all the time, and it works instantly with Logic.)

However, the keyboard does not play music in the application. Console says as follows:


An AudioContext was prevented from starting automatically. It must be created or resumed after a user gesture on the page. main.min.js:1:828653

Error fetching MIDI input devices TypeError: this.midiAccess is undefined

Couldnt init MIDI UI yet TypeError: this.midiSetupDialog is undefined
    fillMIDIDevicesMenu https://app.midiano.com/production/main.min.js:1
    onMIDIInit https://app.midiano.com/production/main.min.js:1
​```
Bewelge commented 5 months ago

Hmm does it play sound when you are just playing a song in the app?

The first message indicates that you need to make some user gesture in the app (like mouse click or tap) for the sound to start. Just try clicking the screen/on-screen keyboard.

You can ignore the bottom two messages - they come up if the app attempts to initialize MIDI too early but it will retry and as long as you can see MIDI devices for selection it means that it eventually worked.

forthrin commented 5 months ago

Nothing happens in the application when pressing the physical keyboard.

No sound, no highlighting of piano keys, no console messages.

I have clicked the MIDI button and selected the physical keyboard for input (and output).

Clicking the OSD keyboard with the mouse creates piano sound.

Bewelge commented 5 months ago

Okay so just to clear up:

Setting a MIDI input should make the app react to you pressing keys on your physical piano keyboard. Setting a MIDI output should make your physical keyboard play the sound of the notes of the song playing in the app (I just checked, pressing on the On-Screen piano doesn't actually output any MIDI messages only the notes of the song. That's an oversight on my part. I guess I never thought of that use-case.)

Some other things to check:

forthrin commented 5 months ago

Question 1 + 2: See OP. Question 3: Nothing when pressing physical keyboard. Integers (0-2) when software is playing built-in song.

https://medias.audiofanzine.com/images/normal/m-audio-oxygen-61-3rd-gen-750520.png https://medias.audiofanzine.com/images/normal/m-audio-oxygen-61-3rd-gen-919708.jpg

Bewelge commented 5 months ago

If you select an output device it should say something like

Sending MIDI event (3) [144, 71, 55] 9969.520166666667 (3) [128, 71, 0] 10036.496416666667

when a built-in song is playing a note.

forthrin commented 5 months ago

Yes it does. But why send note data from the application to the physical keyboard...?

Still no response from the application when pressing the physical keyboard.

Also, must restart the browser and reinstall the extension every time the keyboard is connected.

How do I make this work?

PS! Are you the software that is used in all those YouTube videos?

PPS! What other similar software do you know of?

Bewelge commented 5 months ago

It would help if you paste the content of that "Sending MIDI event"-message.

But if you see those messages and hear no sound coming from your piano I would guess that it must be caused by some settings on your piano. Midiano sends NoteOn and off events on channel 1.

It is sending MIDI events if you select a device as MIDI output. You can use it to play MIDI files over your MIDI device. In my case I use it because my e-piano sounds SO much nicer than any web-synthesizer I know of.

So just to explain the input/output settings again: You select a MIDI output device if you want the sound to come out of your physical keyboard. You select a MIDI input device if you want to control the app with your physical device. If they show up in the selection menu and those console messages are appearing but you're not hearing any sound from your device it really seems like your device isn't correctly processing/sending MIDI events. Have you tried using it with any other MIDI web app?

About having to restart the browser: This is up to your browser. In my experience Chrome doesn't ask at all for MIDI permission and Firefox will ask me the first time I use it. You must have set up your browser to ask you every time.

About having to restart the app when you connect your keyboard: For me this works for both Chrome and Firefox. But like I said, if other browser-apps are using MIDI already it might not be available elsewhere. As far as I know that's up to the browser though and I have no control over that.

PS: There are some Youtube videos made with Midiano but it's not the majority. The OG of these type of programs is Synthesia ( https://synthesiagame.com/ ). The videos with those flashy particle effects are often made with SeeMusic. But I believe that some of the more famous channels use a completely custom setup with their own software and also physical lighting effects like this: https://www.reddit.com/r/midi/comments/1c6ow3l/made_some_live_lighting_for_keyboards_5pin_midi/

PPS https://alternativeto.net/software/midiano-com/ :-)

forthrin commented 5 months ago

The MIDI keyboard has no speakers, as you can see from the photos I've linked to in previous posts.

To be clear: What I want is for the app to show a note about to be played in a piano piece, wait until I press the correct note on my physical keyboard, then play the note through the Mac speakers, and then move on to the next note, wait, etc.

Isn't this what your software is supposed to do?

URL to a page to test for general Web MIDI compliance?

PS! Is there a GitHub project that is really good at converting two staff piano sheet music to two channel MIDI? I have a MIDI file for a piece to learn, but it's not separated for left/right hands, which makes it semi-useless.

PPS! It would be even more useful if finger positions were imported as metadata, and displayed in software such as yours.

forthrin commented 5 months ago

Example output. (Though this seems irrelevant as I only want input.)

Sending MIDI event 
Array(3) [ 144, 68, 40 ]
 26406.91826943026 
Array(3) [ 128, 68, 0 ]
 26467.15926943026
Bewelge commented 5 months ago

Ah I just assumed a keyboard called "m-audio" would have audio, my bad!

So that means you don't want to select a MIDI output device but just an input device, like this: image

For the player to wait you need to enable the "Require playalong" feature for the tracks that you want to play. It's set on per-track basis in the Tracks-menu.

I don't know any perfect test for web MIDI, but just googled this and it worked right away with my keyboard: https://hardwaretester.com/midi

PS: Do you want to convert sheet music or a MIDI file to a two channel MIDI file?

PPS I agree that finger info would be a great addition, but there is no standard in MIDI for fingering. If I ever add MusicXML support that would become possible :)

forthrin commented 5 months ago

Hardware test worked immediately. (Did have to restart the browser, though.)

Yes, I want to use keyboard as input, obviously. Do we give up, or can you provide more troubleshooting?

The "song" in question is "Rach 3", so good luck manually separating the left and right hands on that one. Let me know if you know software that does this out of the box. https://github.com/topics/optical-music-recognition

Bewelge commented 5 months ago

We're not giving up! :)

I added additional logging to https://app.midiano.com/pr-preview/pr-5/ (You'll have to clear your cache for the page to get the latest version) so that all MIDI messages should be logged, not just the noteOn and noteOff events. Right now my best guess is that your keyboard is sending those note events in a shape that Midiano doesn't recognize.

The logging is a little messy now since MIDI clock events will spam the console, but can you check what events are sent inbetween when you actually press a key?

Also can you tell me what the events look like on the hardware test when you press a key?

Oh yea for Rachmaninow it would take more than a few minutes to separate. I think your best bet is to just look for a MIDI file that already has both hands separated. I would guess that most software (maybe some newer AI models) won't be able to flawlessly separate tracks for pieces that complicated. Just search for classical MIDI archives, there's a few out there and for a piece this popular I'm sure you'll be able to find a good MIDI.

Bewelge commented 4 months ago

Assuming this worked. Reopen if you still need help.