How can I use MIDI-Out with JZZ.js MIDI library?

Using Javascript from SpiderBasic
Musikus
Posts: 6
Joined: Thu Nov 11, 2021 3:06 am

How can I use MIDI-Out with JZZ.js MIDI library?

Post by Musikus »

I need some help and please be patient with me, I am a musician, not a programmer ;)

How can I use MIDI-Out with JZZ.js MIDI library (https://jazz-soft.net/doc/JZZ/) in SpiderBasic?

I know, I can load the Script in SpiderBasic
(LoadScript("jzz.js", @ScriptGeladen()))
and that is okay ("success"), but how to proceed then?
How can I open a port and send the midi data in SpiderBasic?

It seems to be so easy, as in the example "Simple Piano" @ https://jazz-soft.net/demo/SimplePiano.html

But how to do it in SpiderBasic?
How is the syntax to open a MIDI Port ("var port = JZZ().openMidiOut();") and send some data (port.send([144,60,127]);) like in the example "Simple Piano"?

Thank you for your help and have a great day!

Johannes
Musikus
Posts: 6
Joined: Thu Nov 11, 2021 3:06 am

Re: How can I use MIDI-Out with JZZ.js MIDI library?

Post by Musikus »

This is, what I have so far...
but I am missing something..

Code: Select all

EnableExplicit
Global port

Enumeration
  #Window
  #cmdPlay
  #cmdStop  
  #port
EndEnumeration

Procedure PortInit()
  Debug "PortJnit " 
  ;  Don't work - port always 0
  !  JZZ.synth.Tiny.register('Synth');
  !  var port = JZZ().openMidiOut();
EndProcedure


Procedure cmdPlayEvent()
     Debug "Port " + port 
      ;       How??  
      ! port.send([144,60,110]);
EndProcedure

Procedure cmdStopEvent()
      ! port.send([144,60,0]);  
EndProcedure

Procedure jsLoaded( URL$ , Success )
    Debug " Script URL : " + URL$
    Debug " Loading status : " + Success
  EndProcedure
  
Procedure Main ( URL$ , Success )
  Debug " Script URL : " + URL$
  Debug " Loading status : " + Success
   OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 230, 80, "JZZ Play", #PB_Window_ScreenCentered)
 
  ButtonGadget(#cmdPlay, 10, 10, 100, 30, "Play")
  ButtonGadget(#cmdStop, 120, 10, 100, 30, "Stop")
 
  BindGadgetEvent(#cmdPlay, @cmdPlayEvent())
  BindGadgetEvent(#cmdStop, @cmdStopEvent())
  PortInit()
  EndProcedure
 
  LoadScript("https://cdn.jsdelivr.net/npm/jzz",@jsLoaded())
  LoadScript("https://cdn.jsdelivr.net/npm/jzz-synth-tiny",@Main())
 
User avatar
Peter
Posts: 947
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: How can I use MIDI-Out with JZZ.js MIDI library?

Post by Peter »

I also don't know exactly why the library is not loading correctly. Maybe it's because of the jsdelivr loader.

In the code below, I have loaded the JS directly from github. Then it seems to work.

Furthermore, you had another small error. You have declared port globally, but you assign JZZ().openMidiOut() to local port variable. Better use "v_port" here:

Code: Select all

EnableExplicit

Enumeration
  #Window
  #cmdPlay
  #cmdStop  
  #port
EndEnumeration

Global Port

Procedure PortInit()
  Debug "PortJnit " 
  ! JZZ.synth.Tiny.register('Synth');
  ! v_port = JZZ().openMidiOut();
EndProcedure


Procedure cmdPlayEvent()
  Debug "Port " + Port 
  ! v_port.send([144,60,110]);
EndProcedure

Procedure cmdStopEvent()
  ! v_port.send([144,60,0]);  
EndProcedure

Procedure Main ()
  
  OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 230, 80, "JZZ Play", #PB_Window_ScreenCentered)
  
  ButtonGadget(#cmdPlay, 10, 10, 100, 30, "Play")
  ButtonGadget(#cmdStop, 120, 10, 100, 30, "Stop")
  
  BindGadgetEvent(#cmdPlay, @cmdPlayEvent())
  BindGadgetEvent(#cmdStop, @cmdStopEvent())
  
  PortInit()
  
EndProcedure

Procedure jsLoaded2( URL$ , Success )
  Debug " Script URL : " + URL$
  Debug " Loading status : " + Success
  Main()
EndProcedure

Procedure jsLoaded1( URL$ , Success )
  Debug " Script URL : " + URL$
  Debug " Loading status : " + Success
  LoadScript("https://raw.githack.com/jazz-soft/JZZ-synth-Tiny/master/minified/JZZ.synth.Tiny.js",@jsLoaded2())
EndProcedure

! define = null; // magic hack

LoadScript("https://raw.githack.com/jazz-soft/JZZ/master/minified/JZZ.js",@jsLoaded1())

Musikus
Posts: 6
Joined: Thu Nov 11, 2021 3:06 am

Re: How can I use MIDI-Out with JZZ.js MIDI library?

Post by Musikus »

Thank you so much! :)
Post Reply