「ディレクトリをジュークボックスにできる?」から始まった、AIとの音楽プレイヤー作り

きっかけは、ただの思いつき

パソコンの中に、mp3が1曲だけ入ったフォルダがありました。

「このフォルダ、ジュークボックスにできる?」

そんな軽い一言から、Claude Codeとのやり取りが始まりました。最初はブラウザで曲を再生できるだけの、本当にシンプルなページを作ってもらうつもりでした。

会話しながら育っていくツール

出来上がったのは、フォルダの中のmp3を自動で読み込んで、クリックすると再生できるだけの小さなページでした。

でも一度動くものができると、次々と「あれもできたらいいな」が出てきます。

「早送りできる?」
「マウス操作なしにキーボードだけで操作できるようにしたい」
「気分に合わせて聞きたい。静かな曲、アッパーな曲、ゲームの曲、みたいにジャンル分けしたいな」

言葉にするたびに、ページに機能が増えていきました。停止ボタン、10秒送り・戻しボタン、矢印キーでの曲選択、Shiftキーを組み合わせた音量調整とジャンル切り替え、マウスでの曲の並び替え——気づけば、最初のシンプルなページとは別物になっていました。

つまずいた場所ほど、学びが濃かった

うまくいかないことも、いくつもありました。

一番印象的だったのは「サーバーを止めたのに、音がまだ鳴っている」という出来事です。停止ボタンを作る前、配信元のプログラムを止めれば音も止まると思っていたのですが、実際はブラウザがすでに読み込んだ音声データを、サーバーとは無関係に鳴らし続けていました。「配信を止める」と「再生を止める」は、まったく別の話だったわけです。

早送りができない曲があったときも、原因は音声ファイルではなく、ページを表示するための簡易サーバー側にありました。ブラウザが「10秒先を聴きたい」とリクエストしても、サーバーがそれに応えられる作りになっていなかったのです。原因を一つずつ確認していくと、見えている症状と実際の原因が違う場所にある、ということがよくありました。

「できたらいいな」を言葉にするだけでよかった

振り返ると、自分がやったことは「こうしたい」を言葉にし続けただけでした。実装の細かい仕組みは分からなくても、「早送りしたい」「キーボードだけで操作したい」「ジャンルで聴き分けたい」と伝えるだけで、その都度形になっていく。

これは音楽プレイヤーに限った話ではなく、日々の業務の中の「こうだったら楽なのに」にも、同じように使えるはずです。大きな仕組みを一から理解しなくても、思いついたことをそのまま言葉にしてみる。そこから始めていいのだと、あらためて感じた出来事でした。

ブログ

BLOG

PAGE TOP