ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】

こちらの、非公式の toioユーザーコミュニティのもくもく会を開催してる中、試した内容を記事にしてみました。
「JavaScript を使って、かつブラウザ上でも動くもの」というのが自分のやりたい内容です。

こちら、開催中！

●toioで作ってみた！友の会（非公式）第10回オンラインもくもく会 - connpass
　https://t.co/wUZJsZ8657#toio #toiotomo

— you (@youtoy) September 19, 2021

手を出してみるかな。

●osc - npm
　https://t.co/f7LEHnx8jl#toio #toiotomo

— you (@youtoy) September 19, 2021

OSC　を扱える JavaScriptライブラリ

ライブラリの調査1： osc.js

最初にやったことは、ライブラリの検索でした。
そして npm search で「osc」をキーワードにした検索を実行すると、以下の結果が得られました。

一番上に出ている osc.js の説明に、「A JavaScript Open Sound Control (OSC) library that works in Node.js and the browser.」と書いてあり、最終更新も 2ヶ月前となっていて開発が止まっている感じでもないため、こちらを見てみることにしました。

ブラウザで利用するために

osc.js のページ内を見ていくと、以下の表が掲載されていました。
ブラウザで動かす場合、over WebSocket という形になるようでした。

そして、ライブラリを CDN から読み込めないか探してみたところ、最新版を読み込めそうな以下のものが見つかりました。

●osc CDN by jsDelivr - A CDN for npm and GitHub
　https://www.jsdelivr.com/package/npm/osc

サンプルを探す

osc.js のサンプルのリンクがあり、以下にいろいろ掲載されているようです。

●colinbdclark/osc.js-examples: Sample code illustrating how to use osc.js in a variety of scenarios.
　https://github.com/colinbdclark/osc.js-examples

また、osc.js のページ内にも以下のようにサンプルコードが書かれている部分があったりしました。

ライブラリの調査2： p5.js用

最近、よく使っている p5.js で使う場合に活用できそうなライブラリがあるかも見てみます。
GitHub上で p5.js 用のものを検索してみました。

上から見ていくと、このあたりが該当しそうでした。

●genekogan/p5js-osc: OSC for p5.js with examples
　https://github.com/genekogan/p5js-osc

●lilyinstarlight/p5-osc: OSC bridge and library for p5.js
　https://github.com/lilyinstarlight/p5-osc

ざっくり見た感じ、osc.js　を直接使っても良いかも、という気もしてきました。

ライブラリの調査3： osc-js

もう少し、別のライブラリも探してみました。
npm search　での検索キーワードを「osc browser」にして実行してみたところ、osc-js というものも出てきました。

　●osc-js - npm
　https://www.npmjs.com/package/osc-js

調査1 であげていた osc.js と何が違うのか、少し見てみます。

osc.js との共通点・違い

まず CDN について調べてみると osc-js のほうも以下から読み込みができるようです。

●osc-js CDN by jsDelivr - A CDN for npm and GitHub
　https://www.jsdelivr.com/package/npm/osc-js

また「No dependencies (except of ws in Node.js or similar environments)」と書かれているように、通信部分で外部ライブラリに非依存となっているようです（osc.js で WebSocket を使う場合は「ws」を使うようでした）。

対応する通信方法について osc-js は「UDP と WebSocket」になるようで、一方 osc.js はその 2つ以外にもシリアル通信が使えるという記載がありました。
それと、osc-js のほうで「Special bridge plugin for easy communication between UDP- and WebSocket clients」という記載があるので、UDP と WebSocket を併用する場合に便利に使えそうな感じです。

それと、ブラウザ上で利用する場合のサンプルは、以下のような感じになるようです。

サーバーの実装

ブラウザで扱う場合は、上に書いたとおり WebSocket を使う形になるため、仲介役になるサーバーが必要です。

そこで、サーバーの実装についても見ていきます。
上の調査で出てきた osc.js と osc-js のそれぞれを使って、サーバーも準備することができそうでした。

osc.js でサーバー（over WebSocket）

osc.js を使い、Node.js でサーバーをたてる場合、以下のようになるようです（over WebSocket の場合）。
ws や express に依存したコードになるようでした。

osc-js でサーバー（over WebSocket）

osc-js を使って Node.js でサーバーをたてる場合、以下のようになるようでした（over WebSocket の場合）。
こちらは、上で出てきた内容のとおり、外部ライブラリに非依存となるようです。

おわりに

今回、ブラウザで OSC を扱う初めの一歩として、ブラウザ用の実装に活用できそうなライブラリや、サーバーに実装の情報を見ていきました。

この後は、osc-js を実際に試していこうと思っています。
（それはまた、別の記事にできればと思います）

【追記】

サーバー・クライアント間での双方向のメッセージのやりとりを試してみて、その内容を記事にしました！

●ブラウザ上の p5.js のプログラムで OSC を使う（サーバー・クライアントは osc-js で実装） - Qiita
　https://qiita.com/youtoy/items/b537b5c9c5b4465d23b3