Node.js でキー入力を利用した効果音ポン出しをやってみる： Readline と play-sound を利用 #JavaScript

ライブで映像配信を行う際やイベントを行っている中で、手動でボタンなどを押下したタイミングで効果音を鳴らすということができる、ポン出しと言われるものがあります。

ポン出しについて、業務用などに、それ用の機材もあったり、ソフトウェアベースのものもあったりします。

●ポン出し機材 - Google 検索
　https://www.google.com/search?q=%E3%83%9D%E3%83%B3%E5%87%BA%E3%81%97+%E6%A9%9F%E6%9D%90&

今回は、そのような「ボタン押下で効果音を鳴らす」といった仕組みを、直近で試していた以下の内容を組み合わせて作ってみます。

●Mac で Node.js ＋ play-sound を使って MP3ファイルを再生してみる - Qiita
　https://qiita.com/youtoy/items/a744e3ca1d52cc9609c5

●【Node.js】入力されたキーが何かを音声で返すプログラムを作ってみる： Readline と Mac の Sayコマンドの組み合わせ - Qiita
　https://qiita.com/youtoy/items/a9efe31249760a4a3022

具体的には、「特定の 5つのキーのどれかを押すと、それに対応した効果音が鳴る」という動作のものを試作してみます。

利用する効果音

今回、お試しで使う効果音は、以下の Springin’ Sound Stock のものを使いました。

●演出 | 無料 BGM・効果音のフリー音源素材 | Springin’ Sound Stock
　https://www.springin.org/sound-stock/category/staging/

用いたものは、具体的には上記で提供されている効果音の中の、以下の 5つです。

アナウンスチャイム1.mp3
ジャジャーン1.mp3
笛ピー1.mp3
スクラッチ4.mp3
キュピーン1.mp3

実際に試してみる

それでは、実際に試してみます。

プログラム

プログラムは、以下のとおりです。基本的に、冒頭で紹介していた 2つの記事で実装した内容を、混ぜ込んだような感じです。

動作としては、数字の 0 から 4 のキーのどれかを押すと、それに対応した効果音のファイルが再生される、というものです。

const player = require("play-sound")((opts = {}));
const readline = require("node:readline");

const soundFiles = [
  "アナウンスチャイム1.mp3",
  "ジャジャーン1.mp3",
  "笛ピー1.mp3",
  "スクラッチ4.mp3",
  "キュピーン1.mp3",
];

function playSound(index) {
  if (index >= 0 && index < soundFiles.length) {
    const filePath = soundFiles[index];
    player.play(filePath, (err) => {
      if (err) {
        console.log(`エラーが発生しました: ${err}`);
      } else {
        console.log(
          `音声 ${index}（${soundFiles[index]}）の再生が完了しました`
        );
      }
    });
    console.log(`音声 ${index}（${soundFiles[index]}）の再生を開始しました`);
  } else {
    console.log("無効な選択です");
  }
}

readline.emitKeypressEvents(process.stdin);
process.stdin.setRawMode(true);

process.stdin.on("keypress", (str, key) => {
  if (key.ctrl && key.name === "c") {
    console.log("終了します");
    process.exit();
  }

  const num = parseInt(str);
  if (num >= 0 && num <= 4) {
    playSound(num);
  } else {
    console.log(`"${str}" は無効なキーです。0から4のキーを押してください。`);
  }
});

console.log("0から4のキーを押して効果音を再生してください（Ctrl + c で終了）");

上記で使われている処理に関する説明は、冒頭に記載した 2つの記事のほうをご参照ください。

動作確認

それでは、キー入力で効果音を鳴らす仕組みの動作確認です。

以下が動作確認中の様子で、数字の 0 から 4 のキーのどれかを押すと、それに合わせてそれぞれ別の効果音が鳴っていることが確認できます。

今回は 1台の PC で完結させた構成にしましたが、外部デバイスとの通信の仕組みを組み合わせて、他デバイスからのポン出しを行えるようにしても良さそうに思いました。

また、以下の記事に書いた内容を組み合わせると、インターネット越しに効果音を鳴らすというようなこともできそうです。

●HTTPリクエストをトリガーに効果音がなる仕組みを Node.js で作ってみる（play-sound と Node.jsの標準モジュールの組み合わせ） - Qiita
　https://qiita.com/youtoy/items/5858fe378c42a705d2b4

余談：プログラムの作成過程

余談ですが、上記を作る際には Anthropic の「Claude 3.5 Sonnet」を使って、2つのプログラムを混ぜ込むというのをやりました（プロンプトは、少し雑な感じのものになっていますが...）。
その結果に対しては、自分でさらに手を加えて、上記の最終版の内容としています。

2つの個別に作った内容を、整合性をとりつつ 1つにする、という部分が楽に行えて便利でした。