DMPlayer2

iPhone / iPad向けの、ローカル音源専用PWAミュージックプレーヤーです。音源はサーバーへ送信せず、ブラウザ内のIndexedDBへ保存します。インターネット接続なしでライブラリの閲覧と再生ができます。

公開版: https://ikaring45.github.io/DMPlayer2/

主な機能

• MP3 / M4A / AAC / FLAC / WAV / AIFF / OGG / OPUSなどの複数選択追加
• MIDI（MID / MIDI）を端末内で音源化し、通常曲と同様に再生・シーク・EQ操作
• IndexedDBへの音源・曲情報・プレイリスト・歌詞・設定の保存
• 再生、一時停止、シーク、前後移動、音量、シャッフル、3種類のリピート
• キュー、プレイリスト、お気に入り、最近追加した項目、再生履歴情報
• 曲・アーティスト・アルバム検索
• 通常歌詞とLRC同期歌詞、現在行の追従、歌詞行タップによるシーク
• Media Session API対応環境でのロック画面操作
• ライト / ダーク / システムテーマ
• 5バンドイコライザーと音質プリセット
• iPhoneの下部タブ、iPad横画面の3ペインUI、Safe Area対応
• Web App ManifestとService Workerによるホーム画面追加・オフライン起動

開発

Node.js 22.13以上を使用します。

npm install
npm run dev

本番ビルド：

npm run build

音楽ファイルの追加

画面右上またはサイドバーの「音楽を追加」を押し、iOS / iPadOSの「ファイル」から音源を選びます。複数選択に対応しています。

初期の曲名はファイル名から作成されます。アーティスト - 曲名.mp3 の形式ならアーティスト名と曲名を分けて登録します。曲のメニューにある「曲情報を編集」から曲名・アーティスト・アルバムを変更できます。

PWAとしてインストール

1. HTTPSで公開されたDMPlayer2をSafariで開きます。
2. Safariの共有ボタンを押します。
3. 「ホーム画面に追加」を選びます。
4. ホーム画面のDMPlayer2アイコンから起動します。

ローカル開発用URLは、同じPC上の確認に限りPWA機能を試せます。iPhone / iPadでの実機確認にはHTTPS公開が必要です。

iPhone / iPadでの確認項目

• Safari表示とホーム画面からのスタンドアロン表示
• Dynamic Island、ノッチ、ホームインジケータとの重なり
• ファイル選択、複数曲の保存、PWA再起動後の保持
• 再生・一時停止・シーク・前後移動・バックグラウンド復帰
• 機内モードでの起動、ライブラリ表示、保存済み音源の再生
• iPad縦画面と横画面でのレイアウト

データ構造

IndexedDBデータベース名はdmplayer2、バージョンは2です。旧バージョンのデータは曲ごとに安全に遅延移行します。

• tracks: 曲情報、アートワーク、歌詞、お気に入り、再生回数、日時
• audio: 曲IDごとの音声データ（再生時に必要な1曲だけ読み込み）
• playlists: 名前と曲IDの配列
• settings: テーマと音量などの端末設定

音声再生時だけBlob URLを作成し、曲の変更時に解放します。「設定 > ライブラリをすべて削除」は確認後に音源とプレイリストを削除します。

既知のiOS / iPadOS制約

• FLACを含む形式の再生可否は、端末のiOS / iPadOSとSafariが対応しているかに依存します。
• ブラウザやOSがストレージを整理すると、IndexedDBのデータが削除される可能性があります。端末の空き容量を十分に確保してください。
• iOSでは最初の音声再生にユーザー操作が必要です。自動再生は行いません。
• バックグラウンド再生やロック画面操作は、OSの省電力管理やMedia Session API対応状況に影響されます。
• Service Workerはアプリ本体をキャッシュします。音源はCache StorageではなくIndexedDBに保存します。

GitHub Pages公開について

ManifestとService Workerは相対パスで構成してあり、将来サブパスのGitHub Pagesへ公開しやすい設計です。公開時は静的出力方法、リポジトリ名に応じたベースパス、GitHub Actionsを最終確認してください。