colinbdclark / osc.js-examples

Sample code illustrating how to use osc.js in a variety of scenarios.
104 stars 28 forks source link

Request only: An example of sending an OSC message from browser to MAX to trigger a sound #21

Closed mgw-sbex closed 4 years ago

mgw-sbex commented 4 years ago

Hey All, we would like to trigger sounds remotely from a Javascript webpage, without installing any software on the MacOS machine using the webpage in Chrome. We were thinking to use Ableton Live / MAX MSP on a Mac to receive the OSC message and play the sound. Is this doable with this library ?

colinbdclark commented 4 years ago

An ordinary web page can't open a UDP or TCP socket to Ableton or Max directly. You have a couple of options:

  1. Use a Node.js server to mediate between the two, communicating between the web page and the proxy server using Web Sockets, and UDP to communicate between the server and Max.
  2. Create a Chrome app, which will need to be installed by the user (typically distributed via the Chrome Web Store)

There are examples for both approaches in this repository.

mgw-sbex commented 4 years ago

Colin, thank you so much for the quick response.We are not OK with installing anything on the source of the triggers, even a Chrome app. The first one sounds like it could work for us. It seems that the only sample app that sends from browser to node is the udp-browser/ is that right? It seems to require python on the machine with the webpage according to the description. If so we cannot install python on the machine. Thank you!

colinbdclark commented 4 years ago

Hi again,

As I mentioned, you need some kind of intermediate server on the computer that can handle proxying between Web Sockets and UDP or TCP. There are two demonstrations in this repository: one which uses Python, and another which uses Node.js (as I mentioned above). Please do take the time to read through the examples.

If Node.js or Python doesn't work for you, you'll need to look into whether there is a Web Socket library for Max. You'll also likely face cross-origin issues in that case.

Best of luck!

mgw-sbex commented 4 years ago

Hi Colin, Yes I read through the examples. We are fine with installing node and python on the Mac with Ableton/MAX, just not on the other Mac that runs only the webpage in chrome. I think we might be in agreement that your udp-browser example can work?

In the Readme for that example item 4: To send an OSC message from the browser to the UDP socket, run python testReceive.py. This will start a Python-based UDP OSC server. Then in the browser, click the 'Send OSC message' button. An OSC message should appear in the terminal window where you ran testReceive.py.

From this it seems the browser is running on the machine with python, right ?

colinbdclark commented 4 years ago

Is this for a commercial project?

mgw-sbex commented 4 years ago

No we want to use it as part of a demo. If the demo goes well, then we could use it.

colinbdclark commented 4 years ago

Just to be clear @mgw-sbic, I develop osc.js in my spare time as a labour of love for the arts community and my own creative practice. Providing technical support for free can be time-consuming and taxing, especially for for-profit companies and those who don't reciprocally contribute their work as open source software.

You can run your intermediary server anywhere you like. It will be responsible for:

  1. Serving the web page
  2. Handling a Web Socket connection from the user's browser
  3. Managing a UDP socket to Max/Ableton
  4. Relaying OSC messages from the Web Socket connection to the UDP connection, and vice versa

This demo is the most comprehensive demonstration of how this works. In the example, you'll see we use the Express library to serve the static HTML page, the WS library to handle the Web Socket server, and osc.js to relay messages between them. Further documentation about the osc.js API is available in the osc.js repository itself.

mgw-sbex commented 4 years ago

Thank you again Colin, not only for the huge contribution to open source here, but for taking questions about it as well. IMHO the example description for that example you reference was just a little unclear about the requirements, so I asked for clarification.