SmartRandomPlayerがPWAに対応しました - 自作メディアプレーヤー作成日記④

2025年12月1日

すこしずつ、ずこしずつランダム音楽プレーヤーの「SmartRandomPlayer」のメンテと機能の強化をしています。
音楽ファイルの登録方法や曲の管理方法を使いやすい物に拡張してます。
今回はPWAというGoogleカレンダーなどに備わっているアプリケーションインストール機能を実装しましたので紹介します。

■SmartRandomPlayerの実装おさらい

このWebアプリケーションはFile System Access API技術を使って、PC内（ローカル）の音楽メディアファイルにアクセスして、ブラウザ上で再生する仕組みになっています。サーバーに音楽ファイルをアップロードする必要がなく、手元にある音楽ライブラリをそのまま活用できるのが特徴です。
また、登録した楽曲やレベル設定などのデータはIndexedDBに保存されるため、ブラウザを閉じても情報は保持されます。
しかし、ブラウザからローカルのメディアファイルへアクセスするには、承認をユーザーに行って貰う必要があります。

Webアプリケーションから新たに再生するファイルが選択されると、「ファイルへのアクセスを許可しますか？」等のダイアログが出て承認作業をします。
このダイアログがあるために、SmartRandomPlayerの操作感が失われてしまうことが以前から気になっておりました。

登録した音楽ファイルを、再生しっぱなしで好みの音楽が沢山ながせられるのが本来の目的です。いずれ公開するデスクトップアプリケーションであれば、そのような問題はないですが、このWebアプリケーションではこの操作感が実現できません。

しかし、ブラウザからローカルのメディアファイルへアクセスするには、承認をユーザーに行って貰う必要があります。
Webアプリケーションから新たに再生するファイルが選択されると、「ファイルへのアクセスを許可しますか？」等のダイアログが出て承認作業をします。

このダイアログがあるために、SmartRandomPlayerの操作感が失われてしまうことが以前から気になっておりました。

登録した音楽ファイルを、再生しっぱなしで好みの音楽が沢山ながせられるのが本来の目的です。いずれ公開するデスクトップアプリケーションであれば、そのような問題はないですが、このWebアプリケーションではこの操作感が実現できません。

ChromeのPersistent Permissions機能（three-way prompt）という物があり、この機能を活用することで、登録済みの全ファイルに対して一括で承認を行えるようになります。従来は曲ごとに個別のダイアログが表示されていましたが、アップデート後は「ランダム再生」ボタンを押した際に一度だけ承認すれば、以降はダイアログなしで連続再生が可能にです。

この機能を実装しましたが、やはり状況によっては認証ダイアログが連続で出現する動作をする場合があり、どうにかできないかと思案してました。

■Progressive Web Apps（プログレッシブウェブアプリ）の実装

略してPWAと言いますが、この技術はWebサイトをネイティブアプリのように使えるようにする技術です。
この技術であれば、ホーム画面やデスクトップにアプリとしてインストールでき、ブラウザのアドレスバーやタブが非表示の専用ウィンドウで起動できます。

さらに重要なのが、PWAとしてインストールされたアプリは、一度ファイルアクセスを許可すれば、その権限が自動的に永続化されるという点です。つまり、承認ダイアログに悩まされることなく、スムーズな連続再生が実現できます。

他にもPWAにはオフラインでWebアプリケーションを実行できる環境を提供できますが、SmartRandomPlayerではランダム再生のロジックをサーバー側で制御してますので、オンライン下での仕様が前提になります。

■PWAでのアプリケーションインストール方法

インストール方法は、アプリケーションの操作説明に乗せてますが、改めてここで説明します。

Chromeの場合、ブラウザ右上の三点メニュー（︙）をクリックし、「キャスト、保存、共有」を選択すると、サブメニューに「SmartRandomPlayerをインストール...」という項目が表示されます。これをクリックするとインストールが開始されます。

インストールが完了すると、デスクトップにSmartRandomPlayerのアイコンが作成されます。次回からはこのアイコンをダブルクリックするだけで、ブラウザのアドレスバーやタブのない専用ウィンドウでアプリが起動します。

なお、Edgeの場合も同様の手順でインストールできます。アドレスバーの右側にインストールアイコン（四角に矢印のマーク）が表示されることもありますので、そちらからもインストール可能です。

このインストール作業により、限りなくデスクトップアプリケーションと同じような操作感となります。

■今後のSmartRandomPlayerの展開予定

このWebアプリケーション版は、お試しのバージョンです。

個人用に作成したデスクトップアプリケーションでは1000曲ほど音楽ファイルを登録して、レベル20以上で動作させて、自宅に居る時はずっとこのプレーヤーで音楽を流してます。
聞き飽きた音楽は低レベルにすることによって、ほどよい感じで音楽ライブラリを聞き流している状態です。

また、同じ機能を持つスマホアプリケーションもある程度開発できて、長時間の外出でも、お気に入りの音楽を良い感じで聞き流している状態です。

順次公開していきますので、それまでは良かったらこのWebアプリケーション版で、私の考えた再生ロジックでのランダム再生を楽しんでください。