jazz-soft/JZZ

Trying to connect to a MIDI keyboard

vassbo opened this issue · 25 comments

Hi, amazing job on JZZ!

I am creating an electron application and using JZZ from the "node" engine, and want to detect MIDI inputs.

I can get the MIDI inputs and outputs from the JZZ().info(). Both of the lists are showing data from an external MIDI keyboard I have plugged in. But when I call JZZ().openMidiOut(output.name), or JZZ().openMidiIn(input.name), it can't connect for some reason. JZZ().openMidiIn() don't work either. Connecting to the "Microsoft GS Wavetable Synth" output works fine.

Testing from your test site: https://jazz-soft.net/download/web-midi/web-midi-test.html, works completely fine. The site detects the key press MIDI inputs from the keyboard. What am I doing wrong?

Are you on Windows by any chance?

Hi! Thanks for asking!
Have you tried https://github.com/jazz-soft/jazz-midi-electron ?

@tobyhede Yes, I'm on Windows 10.
@jazz-soft I saw it, and didn't try it because of lacking documentation, but will try it now.

I can't get it to work.
In the frontend the package don't have access to the child process, and in the backend it doesn't have access to the navigator.

Is there a reason the default JZZ package won't open the MIDI in/out sometimes? Because it seems to work fine other than that.

You can try to play with the security settings maybe that will allow you run the child process.
I have some ideas how to make it work without starting child processes, but that may take me a while...
How soon do you need it?

Thank you.
I can try getting it to work for now, by changing the security. And update you on the progress.

If you can get it to work without, that would be awesome, no hurry.

Could not get it to work, sorry. Just getting a lot of errors.

Changed "contextIsolation" to false
Then had to install "rollup-plugin-polyfill-node" to make it understand 'child_process', 'util' and 'path'.

But still getting these errors:

[!] Error: 'default' is not exported by node_modules/jazz-midi-electron/index.js
[!] Error: 'default' is not exported by node_modules/jzz/javascript/JZZ.js
(!) `this` has been rewritten to `undefined`
node_modules/jzz/javascript/JZZ.js

I don't think it should be this hard.

Just to make clear, do you have Jazz-Plugin installed?

I have "jzz" and "jazz-midi-electron" installed.
Do I also need "jazz-midi"? I don't see it here: https://github.com/jazz-soft/jazz-midi-electron/blob/master/sample-midi-piano/package.json

I wish I could just use this on the backend: https://jazz-soft.net/doc/JZZ/midiin.html
And everything does seem to work fine, except for connecting to some inputs/outputs, but as I said, it can connect to JZZ().openMidiOut("Microsoft GS Wavetable Synth") just fine!

When you list the outputs from JZZ can you see the keyboard?

Yes, I do. Both inputs and outputs!

Is your project available anywhere online? I would take a look...

Thank you! 😊
Here it is: ChurchApps/FreeShow@da648e5.

I reverted it to just the JZZ plugin. It's a big project, but I guess you can find the files. The file talking to JZZ is located here: src/electron/utils/midi.ts

To test it, just right click on the Welcome slide, select "Actions", then click MIDI in or out (Here you can see the inputs/outputs).
Click the slide to trigger the action, and it should log to the node console.
For me it's returning "Cannot open" and "Unknown JZZ error"

I could not install it:

C:\JZZ\freeshow>npm install
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated asar@3.2.0: Please use @electron/asar moving forward.  There is no API change, just a package name change
npm WARN deprecated electron-osx-sign@0.6.0: Please use @electron/osx-sign moving forward. Be aware the API is slightly different
npm WARN deprecated node-pre-gyp@0.17.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future

> freeshow@0.7.0 postinstall
> electron-builder install-app-deps

  • electron-builder  version=23.6.0
  • loaded configuration  file=package.json ("build" field)
  • rebuilding native dependencies  dependencies=@julusian/midi@3.0.1, sqlite3@5.1.2 platform=win32 arch=x64
  ⨯ cannot execute  cause=exit status 1
                    errorOut=npm ERR! code 1
    npm ERR! path C:\JZZ\freeshow\node_modules\@julusian\midi
    npm ERR! command failed
    npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c pkg-prebuilds-verify ./binding-options.js || node-gyp rebuild
    npm ERR! gyp info it worked if it ends with ok
    npm ERR! gyp info using node-gyp@8.4.1
    npm ERR! gyp info using node@19.0.0 | win32 | x64
    npm ERR! gyp info find Python using Python version 3.9.5 found at "C:\Users\sema-\AppData\Local\Programs\Python\Python39\python.exe"
    npm ERR! gyp http GET https://electronjs.org/headers/v21.3.3/node-v21.3.3-headers.tar.gz
    npm ERR! gyp http 200 https://artifacts.electronjs.org/headers/v21.3.3/node-v21.3.3-headers.tar.gz?force_headers_dist=1
    npm ERR! gyp http GET https://electronjs.org/headers/v21.3.3/SHASUMS256.txt
    npm ERR! gyp http GET https://electronjs.org/headers/v21.3.3/win-x86/node.lib
    npm ERR! gyp http GET https://electronjs.org/headers/v21.3.3/win-x64/node.lib
    npm ERR! gyp http GET https://electronjs.org/headers/v21.3.3/win-arm64/node.lib
    npm ERR! gyp http 200 https://artifacts.electronjs.org/headers/v21.3.3/SHASUMS256.txt?force_headers_dist=1
    npm ERR! gyp http 200 https://artifacts.electronjs.org/headers/v21.3.3/win-x64/node.lib?force_headers_dist=1
    npm ERR! gyp http 200 https://artifacts.electronjs.org/headers/v21.3.3/win-x86/node.lib?force_headers_dist=1
    npm ERR! gyp http 200 https://artifacts.electronjs.org/headers/v21.3.3/win-arm64/node.lib?force_headers_dist=1
    npm ERR! gyp info find VS using VS2019 (16.11.33214.272) found at:
    npm ERR! gyp info find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community"
    npm ERR! gyp info find VS run with --verbose for detailed information
    npm ERR! gyp info spawn C:\Users\sema-\AppData\Local\Programs\Python\Python39\python.exe
    npm ERR! gyp info spawn args [
    npm ERR! gyp info spawn args   'C:\\JZZ\\freeshow\\node_modules\\node-gyp\\gyp\\gyp_main.py',
    npm ERR! gyp info spawn args   'binding.gyp',
    npm ERR! gyp info spawn args   '-f',
    npm ERR! gyp info spawn args   'msvs',
    npm ERR! gyp info spawn args   '-I',
    npm ERR! gyp info spawn args   'C:\\JZZ\\freeshow\\node_modules\\@julusian\\midi\\build\\config.gypi',
    npm ERR! gyp info spawn args   '-I',
    npm ERR! gyp info spawn args   'C:\\JZZ\\freeshow\\node_modules\\node-gyp\\addon.gypi',
    npm ERR! gyp info spawn args   '-I',
    npm ERR! gyp info spawn args   'C:\\Users\\sema-\\.electron-gyp\\21.3.3\\include\\node\\common.gypi',
    npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
    npm ERR! gyp info spawn args   '-Dvisibility=default',
    npm ERR! gyp info spawn args   '-Dnode_root_dir=C:\\Users\\sema-\\.electron-gyp\\21.3.3',
    npm ERR! gyp info spawn args   '-Dnode_gyp_dir=C:\\JZZ\\freeshow\\node_modules\\node-gyp',
    npm ERR! gyp info spawn args   '-Dnode_lib_file=C:\\\\Users\\\\sema-\\\\.electron-gyp\\\\21.3.3\\\\<(target_arch)\\\\node.lib',
    npm ERR! gyp info spawn args   '-Dmodule_root_dir=C:\\JZZ\\freeshow\\node_modules\\@julusian\\midi',
    npm ERR! gyp info spawn args   '-Dnode_engine=v8',
    npm ERR! gyp info spawn args   '--depth=.',
    npm ERR! gyp info spawn args   '--no-parallel',
    npm ERR! gyp info spawn args   '--generator-output',
    npm ERR! gyp info spawn args   'C:\\JZZ\\freeshow\\node_modules\\@julusian\\midi\\build',
    npm ERR! gyp info spawn args   '-Goutput_dir=.'
    npm ERR! gyp info spawn args ]
    npm ERR! gyp: name 'openssl_fips' is not defined while evaluating condition 'openssl_fips != ""' in binding.gyp while trying to load binding.gyp
    npm ERR! gyp ERR! configure error
    npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
    npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (C:\JZZ\freeshow\node_modules\node-gyp\lib\configure.js:259:16)
    npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
    npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:293:12)
    npm ERR! gyp ERR! System Windows_NT 10.0.22621
    npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\JZZ\\freeshow\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
    npm ERR! gyp ERR! cwd C:\JZZ\freeshow\node_modules\@julusian\midi
    npm ERR! gyp ERR! node -v v19.0.0
    npm ERR! gyp ERR! node-gyp -v v8.4.1
    npm ERR! gyp ERR! not ok

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\sema-\AppData\Local\npm-cache\_logs\2023-02-18T01_29_29_140Z-debug-0.log

                    command='C:\Program Files\nodejs\node.exe' 'C:\Users\sema-\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js' rebuild @julusian/midi@3.0.1 sqlite3@5.1.2
                    workingDir=
npm ERR! code 1
npm ERR! path C:\JZZ\freeshow
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c electron-builder install-app-deps

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\sema-\AppData\Local\npm-cache\_logs\2023-02-18T01_29_00_135Z-debug-0.log

Looked at the output again...
The problem may be causes by using conflicting MIDI implementations in one project.

Hi, I think you used the "main" branch with the @julusian/midi package (it requires python, that's why I want to use your package), please use the "dev" branch as it has your package! 😊
And no it's just "jzz" as a MIDI implementation in the latest dev version, so that can't be it.

Do you use JZZ on both the back end and the front end or only on the front end?

Only the backend! So basically it shouldn't have anything to do with electron.

I was able to start your application, but I could not find anything named "Actions".

What is the right way to run the app?
typing > electron .
gives the following:

(node:4584) electron: Failed to load URL: http://localhost:3000/ with error: ERR_CONNECTION_REFUSED
(Use `electron --trace-warnings ...` to show where the warning was created)
Something went wrong when loading index: {"errno":-102,"code":"ERR_CONNECTION_REFUSED","url":"http://localhost:3000/"}

Actions is in the context menu of the slide. So you have to go to the "Welcome" show from the bottom drawer, then right click on the presentation slide in the center. There you will find an "Actions" menu with a submenu of MIDI in/out.

"npm start" should run the election application.

And I talk with the backend using contentBridge: window.ipcMain.send("MAIN", {}). But that's already set up, so you don't need to use that.

In midi.ts, line 68 try this:

    try {
        var port = await JZZ()
            .openMidiIn(data.input)
            .or("MIDI-In: Cannot open!");
        console.log("MIDI-In:", port.name())
        port.connect(JZZ().openMidiOut()) // redirect to the default MIDI-Out port
            .connect(function (msg: any) {
                console.log(msg.toString())
                toApp("RECEIVE_MIDI", msg)
            }) // and log to the console
            .wait(10000)
            .close()
            .and("Thank you!")

It looks like TS does not like the keyword this, so I had to add a variable.

If you see the port but cannot open it, check if it is used by another application.

It worked!! And of course it's a simple fix. 😊
Thank you so much for taking your time to help me. You are awesome! 🤩

You are welcome!