osc.js で OSC Data Monitor に OSC over UDP でデータを送る（Node.js の keypress との組み合わせ）

この記事は、最近書いていた記事の中で、以下の 2つに書かれている内容の続きです。

• ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】 - Qiita
• ZIG SIM と Node.js のプログラム（osc.js を利用）との間で UDP による OSC通信を軽く試す（OSC Data Monitor の話も） - Qiita

今回やること

今回は、osc.js を使った Node.js　のプログラムから OSC Data Monitor に OSC over UDP でデータを送ってみます。

osc.js や OSC Data Monitor の情報は、冒頭に書いた記事の 2つ目をご参照ください。

通信を試す

OSC Data Monitor の準備

OSC Data Monitor の準備は、冒頭に書いた記事の 2つ目と全く同じです。

8000番ポートで OSC のデータを待ち受けます。

Node.js のプログラムの準備

受信側の用意はできたので、データの送信側を準備します。

動きとしては「特定のキーを押下したらデータを送信」という流れにしたかったので、osc.js と合わせて keypress を使います。

npmコマンドで osc.js と keypress をインストールしておいてください。

$ npm install osc keypress

それぞれの公式ページのサンプルや説明を見て、以下のプログラムを作っていきました。
ちなみに、OSC Data Monitor も以下のプログラムも同じノートPC内で動かしています。

const osc = require("osc");
const keypress = require("keypress");

var udpPort = new osc.UDPPort({
  localAddress: "0.0.0.0",
  localPort: 8001,
  remoteAddress: "0.0.0.0",
  remotePort: 8000,
  metadata: true,
});

udpPort.on("message", function (oscMsg, timeTag, info) {
  console.log("An OSC message just arrived!", oscMsg);
  console.log("Remote info is: ", info);
});

udpPort.on("ready", function () {
  console.log("ready");

  keypress(process.stdin);
  process.stdin.on("keypress", (ch, key) => {
    if ((key && key.ctrl && key.name === "c") || (key && key.name === "q")) {
      process.exit();
    }
    switch (key.name) {
      case "left":
        console.log("left");
        udpPort.send({
          address: "/carrier/frequency",
          args: [
            {
              type: "f",
              value: 420,
            },
          ],
        });
        break;
      case "right":
        console.log("right");
        udpPort.send({
          address: "/carrier/frequency",
          args: [
            {
              type: "f",
              value: 440,
            },
            {
              type: "f",
              value: 400,
            },
          ],
        });
        break;
    }
  });

  process.stdin.setRawMode(true);
  process.stdin.resume();
});

udpPort.on("error", function (err) {
  console.log(err);
});

udpPort.open();

内容としては、「ローカルの 8000番ポートに対してデータ送信をする設定をしていて、キーボードの右矢印キー・左矢印キーのどちらかを押すとメッセージを送信する」というものです。
今回は使わないですが、8001番ポートでの待ち受けの処理も含まれています。

動作確認

あとは、動作確認を行うだけです。

OSC Data Monitor を起動し、Node.js で作ったプログラムを実行します。
その後、キーボードの右矢印キー・左矢印キーを押して、OSC Data Monitor の表示を確認しましょう。

試してみると、以下のように受信側でメッセージを受けとることができていました。

おわりに

前に書いた記事と今回の記事とで、osc.js を用いた OSC over UDP によるメッセージの送受信を試すことができました。

今後は、Node.js で作ったプログラムと何か別のプログラムを連動させてみたり、osc.js による OSC over WebSocket あたりの内容を試せればと思います。

【追記　】 OSC over WebSocket も試しました

その後、osc.js を用いた OSC over WebSocket も試して記事にしました。

●osc.js でブラウザから OSC Data Monitor に OSC over WebSocket でデータを送る（とりあえず片方向） - Qiita
　https://qiita.com/youtoy/items/0f170f4f86f6d7bf52ad

●p5.js Web Editor のプログラムから osc.js を使った OSC通信（OSC over WebSocket を利用） - Qiita
　https://qiita.com/youtoy/items/45bebdfb948b3f918c05