Coder Social home page Coder Social logo

toshiba01 / osc-js Goto Github PK

View Code? Open in Web Editor NEW

This project forked from adzialocha/osc-js

0.0 0.0 0.0 1.75 MB

OSC library for Node.js, Electron, Chrome Apps, Webpages or any other JS application. It comes with a customizable Plugin API for WebSocket, UDP or bridge networking

Home Page: https://adzialocha.github.io/osc-js

License: MIT License

JavaScript 100.00%

osc-js's Introduction

osc-js

Build status npm version npm licence ESDoc status

osc-js is an Open Sound Control library for JavaScript applications (UMD module for Node, Browser etc.) with address pattern matching and timetag handling. Sends messages via UDP, WebSocket or both (bridge mode) and offers a customizable Plugin API for network protocols.

Wiki | Basic Usage | Documentation | Plugin API

Features

  • UMD Module running in Node.js, Electron, Chrome Apps, browser or any other JS environment
  • Can be used with Webpack and Browserify
  • No dependencies (except of ws in Node.js or similar environments)
  • Receive sender information from incoming messages
  • Built-in UDP, WebSocket networking support as plugins
  • Special bridge plugin for easy communication between UDP- and WebSocket clients
  • Plugin API for custom network protocols
  • Featuring all OSC 1.0 specifications
  • OSC Address pattern matching
  • Time-critical OSC Bundles with Timetags

Documentation

Read more about osc-js and how to use it in the Wiki and Documentation.

Example

const osc = new OSC()

osc.on('/param/density', (message, rinfo) => {
  console.log(message.args)
  console.log(rinfo)
})

osc.on('*', message => {
  console.log(message.args)
})

osc.on('/{foo,bar}/*/param', message => {
  console.log(message.args)
})

osc.on('open', () => {
  const message = new OSC.Message('/test', 12.221, 'hello')
  osc.send(message)
})

osc.open({ port: 9000 })

Installation and Usage

Recommended installation via npm: npm i osc-js or yarn add osc-js.

Import the library const OSC = require('osc-js') or add the script lib/osc.js or lib/osc.min.js (minified version) for usage in a browser.

Plugins

osc-js offers a plugin architecture for extending it's networking capabilities. The library comes with four built-in plugins. This is propably all you need for an OSC application:

  • WebsocketClientPlugin (default)
  • WebsocketServerPlugin
  • DatagramPlugin for UDP network messaging
  • BridgePlugin useful Bridge between WebSocket- and UDP Clients

Configuration and examples of every plugin can be read here: Wiki.

Example: WebSocket Server

Register the plugin when creating the OSC instance:

const osc = new OSC({ plugin: new OSC.WebsocketServerPlugin() })
osc.open() // listening on 'ws://localhost:8080'

Example: OSC between MaxMSP/PD/SC etc. and your browser

  1. Write a simple webpage. The library will use a WebSocket client by default.
<button id="send">Send Message</button>
<script type="text/javascript" src="lib/osc.browser.min.js"></script>
<script type="text/javascript">
  var osc = new OSC();
  osc.open(); // connect by default to ws://localhost:8080

  document.getElementById('send').addEventListener('click', () => {
    var message = new OSC.Message('/test/random', Math.random());
    osc.send(message);
  });
</script>
  1. Write a Node app (the "bridge" between your UDP and WebSocket clients).
const OSC = require('osc-js')

const config = { udpClient: { port: 9129 } }
const osc = new OSC({ plugin: new OSC.BridgePlugin(config) })

osc.open() // start a WebSocket server on port 8080
  1. Create your Max/MSP patch (or PD, SuperCollider etc.).
[udpreceive 9129] // incoming '/test/random' messages with random number

Custom solutions with Plugin API

It is possible to write more sophisticated solutions for OSC applications without loosing the osc-js interface (including its message handling etc.). Read the Plugin API documentation for further information.

class MyCustomPlugin {
  // ... read docs for implementation details
}

const osc = new OSC({ plugin: MyCustomPlugin() })
osc.open()

osc.on('/test', message => {
  // use event listener with your plugin
})

Usage without plugins

The library can be used without the mentioned features in case you need to write and read binary OSC data. See this example below for using the Low-Level API (even though the library already has a solution for handling UDP like in this example):

const dgram = require('dgram')
const OSC = require('osc-js')

const socket = dgram.createSocket('udp4')

// send a messsage via udp
const message = new OSC.Message('/some/path', 21)
const binary = message.pack()
socket.send(new Buffer(binary), 0, binary.byteLength, 41234, 'localhost')

// receive a message via UDP
socket.on('message', data => {
  const msg = new OSC.Message()
  msg.unpack(data)
  console.log(msg.args)
})

Development

osc-js uses Babel for ES6 support, ESDoc for documentation, Mocha + Chai for testing and Rollup for generating the UMD module.

Clone the repository and install all dependencies:

git clone [email protected]:adzialocha/osc-js.git
cd osc-js
npm install

Testing

npm run test for running the tests. npm run test:watch for running specs during development. Check code style with npm run lint.

Deployment

npm run build for exporting UMD module in lib folder.

Contributors

ESDocs

npm run docs for generating a docs folder with HTML files documenting the library. Read them online here: https://adzialocha.github.io/osc-js

License

MIT License MIT

osc-js's People

Contributors

adzialocha avatar eliot-akira avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.