早速ですが皆さん「しずかなインターネット」というサービスをご存知でしょうか？
何を隠そうZennの元開発者でもあるCatnoseさんが開発したサービスです。
リリースされてから自分もすぐに使っているのですが、とっても気持ちの良い執筆体験と程よい心理的安全性を提供してくれていてとてもお世話になっています。
今回この記事で取り上げたいのは、「しずかなインターネット」のムードという機能です。
好みのムードを選択すると、エディター画面が切り替わり、音楽が流れてきます。
普段私は作業中あまり音楽をかけたりしないのですが、この機能を使ってから筆を取るのがとても楽しくなりました。
そんな流れから普段の開発環境やZennの記事執筆でも同じようなことができたらいいなと思い、Zenn CLI起動中に音楽が流れる実装をしてみました。
この記事で行うこと
- npm scriptsで作業タスクに音楽の再生を組み込む
- Zenn CLI起動時に音楽をループ再生する
- Zenn CLI終了時に音楽を停止する
記事中ではパッケージマネージャーにpnpmを使っています。必要に応じてnpmやyarnに読み替えてください。
必要ライブラリのインストール
まずは必要なライブラリをインストールします。
Node.jsで音楽ファイルを再生するためには、play-soundというライブラリを使います。
pnpm add play-sound -D
TypeScriptやts-nodeなどタスクの実行に必要なパッケージもインストールします。
pnpm add typescript ts-node @types/node npm-run-all -D
TypeScript環境のセットアップ
TypeScriptで開発するために、tsconfig.jsonを作成します。
pnpm tsc --init
この記事では設定をデフォルトのままで行います。必要に応じて変更してください。
音源素材の準備
今回はSpringin’ Sound Stockから提供されている焚き火のBGMを利用します。
お好みの音源素材を用意してください。
music フォルダーをルート直下に作成し、その中に音源素材を配置します。
ファイル名は bonfire.mp3 とします。
.
├── README.md
├── articles
├── books
├── music
├── node_modules
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json
音楽再生スクリプトの作成
music フォルダーに playMusic.ts を作成し、音楽（mp3）をループ再生する処理を記述します。そのままコピペで使えます。
music/bonfire.mp3 はお好みの音源素材名に読み替えてください。
import { ChildProcess } from "child_process";
import player from "play-sound";
// オーディオプレーヤーの初期化
const audioPlayer = player();
// 再生中のオーディオプロセス
let audioProcess: ChildProcess | null = null;
/**
* 指定された音楽ファイルをループ再生する。
* @param path 音楽ファイルへのパス
*/
const playLoop = (path: string) => {
audioProcess = audioPlayer.play(path, (err: Error | null) => {
if (err) {
console.error("音楽再生中にエラーが発生しました:", err);
return;
}
// 再生が終了したら再び再生を開始
playLoop(path);
});
};
// プロセス終了時に音楽再生を停止
process.on("exit", () => {
if (audioProcess && !audioProcess.killed) {
audioProcess.kill();
}
});
// Ctrl+Cでの終了を捕捉
process.on("SIGINT", () => {
process.exit();
});
playLoop("music/bonfire.mp3");
以上で音楽再生スクリプトの作成は完了です。
npm scriptsで作業タスクに音楽の再生を組み込む
次にnpm scriptsを使って、作業タスクに音楽の再生を組み込みます。
package.json の scripts に以下のコマンドを追加します。
{
"scripts": {
"start": "zenn preview",
"start:music": "npm-run-all --parallel start music",
"music": "ts-node ./music/playMusic.ts"
},
}
今回、start:music のコマンド実行時に start と music の両方が実行されるようにしています。ここもコマンド名などお好みで変更してください。
試しに start:music を実行してみましょう。
pnpm start:music
Zenn CLIが起動し、音楽が再生されることを確認できます。
まとめ
この記事を書いている今も焚き火の音楽が流れているのですが、とても心地よくて集中力が上がっている気がします。
チーム開発では音楽の好みが合わないということもあるかもしれませんが、個人開発や個人作業ではぜひ試してみてください。それでは良い開発ライフを！
Discussion