SmartRandomPlayer
「ランダムだけど、好きな曲が多めに流れる」を実現するWebアプリケーション
祝！開発中のプレーヤー名が決定！
ずっと「特殊ロジックを持ったランダムプレーヤー」みたいな紹介をしてましたが、やっと正式名称を決めました。
「SmartRandomPlayer」（スマートランダムプレーヤー）
…ヒネりもなんにも無いです。命名とか難しいですよ。コピーライターは偉大です。
AIに聞いてもイマイチで、提案の中で自分の感覚に近いものをアレンジしました。
機能的なものを説明すると
「ランダムなのに、好きな曲が自然に多めに再生されるプレーヤー」
になります。
開発の経緯は「自作メディアプレーヤー作成日記①」を見てください。お気に入りの曲ほど沢山流れるプレーヤーになります。
私がエンジニアとして復帰する（目指している）きっかけになったアプリケーション制作です。
パート②ではTauriでアプリケーションの構築をしながら、Rustの勉強もしようとしてると言って終わっていました。
あれからずいぶん経ちましたが、実は完成してないんですよ。
■皆さんは完璧主義者ですか？
レオナルド・ダ・ヴィンチは、なかなか作品を完成させられず、完成品と呼ばれるものが少なく、あのモナリザも、ダ・ヴィンチ自身は生涯この作品を手元に置き続け、死の間際まで加筆修正を続けていたと言われています。依頼主に納品することもなく、完成を宣言することもありませんでした。 現在「完成作」として扱われていますがね。
これを完璧主義と捉えるか、強いこだわりと湧き出るアイデアから来る多動性・衝動性と捉えるかは意見の分かれるところではありますが、このダ・ヴィンチ症候群とも言える状態は、私は既視感があるんですよ。自分もそのような面が若干有ります。
このアプリ、曲のリストを制作してデータ管理するのですけど、PCとスマホとでクラウドデータ共有させようとか、Webアプリケーションでもできるぞとか、SpotifyのAPIと連携できるぞとか、音楽だけで無く動画メディアでも動作させられないかとか、とにかく拡張機能の構想が尽きないのです。
たかだかランダムプレーヤーにそこまで求めてないのに。
私ごときが自分をレオナルド・ダ・ヴィンチに置き換えるなぞ、おそれ多いことですが、作成中の「SmartRandomPlayer」が完成しないのも、機能面であれこれと実現させたいアイデアが次々に浮かんでしまって収拾がつかないんです。
そこで、コア機能である選曲ロジックを簡単に体感できるように、機能を限定してお試し版としてリリースしようと考えました。
おりしもClaude Codeを導入し、良い感じに使いこなせてきた矢先でした。サクッと作ってもらえばいいやと思ったのです。
しかし…
またしても
「ん～。この機能は付けておかなきゃ。」
「この機能があるなら、こうしたことができなきゃダメだよなぁ…」
なんて事になり、完成が遅れ気味に…
これって私が完璧主義者なのでしょうか？普段の所作からみれば「んなわけあるか💢」と友人から怒られそうです。
でも、できるだけ完成度の高い物を提供したいじゃないですか。でも、どちらかというと、完璧主義者では無くアイデアが止まらないタイプの人間と自己分析します。
■限定機能のWebアプリケーションバージョン
こうしてWebアプリケーションで、お試し版「SmartRandomPlayer」は、ひとまず公開することにしました。
ほとんどClaude Codeに任せて作成したのですが、コアロジックのコードは完成形がありましたので、それをPHPなりJavaScriptに移植させただけです。
開発に関する技術的な説明は追々とするにして、そもそもの「ランダムだけど、好きな曲が多めに流れる」というロジックをどの様にして組んだかの解説をします。
・重み付きランダム選曲の発祥
音楽の選曲の基準で、「レベル」という概念を入れました。
アイデアの発祥は、好みの曲を多めに再生させる為に、既存のPCアプリ「VLCメディアプレーヤー」のプレイリストへの登録方法を工夫した事が発端です。
音楽ファイルを「L01」「L02」「L03」…などレベル分けして大きいレベルほど沢山プレイリストに登録する手法です。
つまり、
「L01フォルダ」×１
「L02フォルダ」×２
「L03フォルダ」×４
と登録するのです。
…お気づきですか？これって指数関数的に増えてるじゃないですか。そこが発想の源でした。
・めんどい作業はプログラムで実装
しばらくは上記の方法で音楽を楽しんでましたが、色々と不都合が目立つように。
曲のレベル変更する時はプレイリストの変更作業が必要
レベルの相対的確率の変更ができない（指数関数の傾きの調整が不可）
手持ちの音楽ライブラリが大きいと、準備が大変
他にも、スマホにはVLCのプレイリストが使えないので、別の方法でセッティングしなければならなかったり。
そこで、このレベルの概念を曲ファイル個別に持たせてデータベースにし、そのレベルを確率分布による重み付けの基本数にすることにしました。
分かりやすく図にしますと、
レベル 再生確率
1 0.0978%
2 0.1955%
3 0.3910%
4 0.7820%
5 1.5640%
6 3.1281%
7 6.2561%
8 12.5122%
9 25.0244%
10 50.0489%
各レベルの確率分布はこのようになって、そのレベルの確率をまた登録している曲数で割り、その曲の出現確率にします。
ただ、それだけだと高レベルの同じ曲ばかり流れてしまうことになるので、各レベルに登録されている曲が均等に再生するようにしています。（要はシャッフル再生）
さらにレベル数分だけ再生されると自動で下のレベルに変更します。
これで沢山流れた曲は自動で再生されにくくなるという仕組みです。
あと、傾きの種類（関数の種類）や係数を変化させたり。
あぁっ！ややこしいっ！説明するの難しいわっ！
なんでこんな物作ったんでしょう。自分の頭で理解できている物を他人に説明することの難しさよ。
ひとまず登録ファイル数やレベルを限定させたお試し版をWebアプリケーションで作成しました。良かったらお試しで使ってみてください。
SmartRandomPlayer
「ランダムだけど、好きな曲が多めに流れる」を実現するWebアプリケーション
■少し技術的解説を
ローカルのファイルをブラウザに登録することに抵抗する方も居られるでしょう。ですが、このWebアプリケーションは、ユーザーさんの音楽ファイル本体をサーバーには一切送信しません。
送信するデータは「楽曲のファイル名」、「再生回数」、「レベル情報」、「データ検索のキーに使うSHA-256ハッシュ値」です。
※このハッシュ値からは元の音楽ファイルを復元することは技術的に不可能なため、ファイルの中身は保護されます
技術的には、File System Access APIという最近実装されたWeb技術を使用しています。
これはChrome 86以降とEdge 86以降で利用可能な機能で、ユーザーの明示的な許可なしにファイルにアクセスすることはできません。ファイルを選択する際には毎回ブラウザから許可を求められますので、アプリケーションが勝手にファイルを読み取ることもありません。
選択されたファイルの参照情報はブラウザ内のIndexedDBに保存されます。これはブラウザが提供するローカルストレージの一種で、データはユーザーのPC内に保存され、他のWebサイトからはアクセスできません。また、ブラウザのキャッシュをクリアすれば、保存されたデータも削除されます。
サーバー側で実行されるのは、ランダム選曲アルゴリズムのみです。
ユーザー側（クライアント側）から曲リストデータを送信してもらい、選曲後にキーのハッシュ値を送信します。
このように、ローカルファイルの安全性とプライバシーを最優先に考慮した設計としてますが、今のところ対応できるブラウザが最新バージョンのChrome、Edge、Operaのみです。スマホのブラウザには対応してないです。Firefoxも未対応です。
Chrome系のブラウザは他にもあると思いますが、一応安全性の観点から絞らせてもらいました。
なお、プライベートブラウジングモード（シークレットモード）ではIndexedDBが制限される場合があるため、通常モードでアクセスしてください。
しっかし、分ってたとは言え、いざ公式にリリースとなると様々な作業が発生しますね。デバッグはもとより、操作感のチューニングやレイアウト、各機能の文言や、説明文の妥当性。
AIによるサポートがあっても、人間が頭を使う領域はまだまだあります。
ですので完成を急ぐために大幅機能限定版です。おいおいアップデートしますが、このままだとWebアプリケーション版も完成しないので。
やっぱり私はダ・ビンチ症候群なのでしょうか？
ご感想や不具合報告を入力いただくページも作りました。ひとまず使ってみてください。
SmartRandomPlayer ご意見・ご要望 GitHub discussions. page
姉妹ブログ紹介
noteの私のページです。今のところAI関連の話題が中心ですかね。
私のQiitaのページです。作ったアプリケーションの技術的な解説などを載せてます。