以下の記事を書いた際に行っていた、Node.js の「play-sound」による効果音の再生を、Web経由で行う簡易な仕組みを試作してみます。
●Mac で Node.js ＋ play-sound を使って MP3ファイルを再生してみる - Qiita
https://qiita.com/youtoy/items/a744e3ca1d52cc9609c5
リアルタイムなやりとりをするなら MQTT などを使うのが良さそうなところではあるのですが、今回は思いつきで HTTPリクエストを使ったものにしてみます。
その HTTPリクエストを受けとるサーバーの部分は、Node.js の標準モジュールを使う形で実装してみます。
HTTPリクエストを受けとる部分のシンプルな実装
まずは、 HTTPリクエストを受けとるサーバーの部分を、簡易な実装で用意してみます。
それに関しては、上記のとおり Node.js の標準モジュールを使って実装します。
HTTPリクエストは、GETリクエストを用いる形にしました。
const http = require("node:http");
const port = 3000;
const server = http.createServer((req, res) => {
if (req.url === "/httpsound" && req.method === "GET") {
console.log("HTTPリクエストを受け取りました。");
res.writeHead(200, { "Content-Type": "text/plain" });
res.end("Hello, World!");
} else {
res.writeHead(404, { "Content-Type": "text/plain" });
res.end("404 Not Found");
}
});
server.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
動作確認
上記を実行して、ブラウザから http://localhost:3000/httpsound にアクセスしてみます。
ブラウザからアクセスした後、Node.js側では以下のようにメッセージが出力されたのが確認できました。
またブラウザ側では、以下のとおりレスポンスが返ってきていることが確認できました。
効果音を再生する部分を加える
上記の HTTPリクエストを受けとった時に、効果音を鳴らす処理を追加してみます。
ここで鳴らす効果音は、冒頭に掲載していた記事で使った効果音と同じものを用いることにします。
効果音を鳴らす処理を追加した内容は以下のとおりです。
以下を実行する前には、npmコマンドで play-sound をインストールしておいてください。
また、play-sound を使って再生する MP3ファイルは、同じフォルダに置いて以下を実行してください。
const http = require("node:http");
const player = require("play-sound")((opts = {}));
const filePath = "焚き火短.mp3";
const port = 3000;
const server = http.createServer((req, res) => {
if (req.url === "/httpsound" && req.method === "GET") {
res.writeHead(200, { "Content-Type": "text/plain" });
res.end("Hello, World!");
player.play(filePath, (err) => {
if (err) {
console.log(`エラーが発生しました: ${err}`);
} else {
console.log("再生が完了しました");
}
});
console.log("再生を開始しました");
} else {
res.writeHead(404, { "Content-Type": "text/plain" });
res.end("404 Not Found");
}
});
server.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
上記を実行して、ブラウザで http://localhost:3000/httpsound にアクセスしてみます。
ブラウザでアクセスするたびに、効果音が再生されることが確認できました。
インターネットから音を鳴らせるようにする
最後に、上記の 1台の PC内で完結した形でなく、インターネット経由でスマホなどから音を鳴らせるようにしてみます。
その方法の 1つとして、以前、以下の記事に書いた仕組みを用いることもできますが、今回はそれと同じことができる ngrok を使った方法を使うことにします。
●VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
https://qiita.com/youtoy/items/56e48c84d6a2f0549155
上記のサーバー側のプログラムを実行した後、別途、以下を実行します。
ngrok http 3000
これで、ローカルで 3000番ボートで立てたサーバーに、インターネットからアクセスできるようになります。
上記の ngrokコマンドを使った処理を行った後、インターネットからアクセスする https://【文字列】.ngrok-free.app/ といった URL が表示されるかと思いますので、それに httpsound を付け加えた https://【文字列】.ngrok-free.app/httpsound という URL にアクセスしてください。
動作確認を行ったところ、スマホなどからインターネット越しに効果音を再生させることができました。