ミニゲーム: 音楽プレイヤー
「ミュージックプレイヤー」は、ローカルの音声ファイルを取り込み、プレイリスト管理・再生・視覚化・イコライザー調整を一体化したユーティリティです。 IndexedDB に音源データを保存し、UI の状態は localStorage に保持されるため、ブラウザを閉じてもライブラリと設定が維持されます。
前提条件と制限
- Web Audio API と IndexedDB が利用可能なブラウザが必要です。
- 取り込みできるファイルは
audio/*の MIME タイプに限られます。 - 1 ファイルあたりの最大サイズは 12 MB、ライブラリの登録上限は 32 曲です。
- 初回再生時に AudioContext を生成するため、ユーザー操作が必要です。自動再生は行いません。
画面構成
- ヘッダー
- 現在の再生曲名と長さを表示します。曲が未選択の場合はアプリの説明に切り替わります。 右側には「音源を追加」ボタン（複数ファイル選択可）と設定メニュー (⚙) が並びます。
- プレイリストパネル
- 曲数の統計、検索ボックス、曲一覧を備えています。各曲カードには再生・移動・削除ボタンと、長さとファイルサイズが表示されます。
- 再生コントロール
- 前 / 再生・一時停止 / 停止 / 次 のボタン、経過時間・残り時間付きのシークバー、音量 (0〜100%) と再生速度 (0.5〜2.0 倍) スライダーを備えています。
- ビジュアライザー
- オシロスコープ (波形) と周波数スペクトラム (ピーク表示付き) をリアルタイム描画します。
- イコライザーパネル
- 6 バンド (60Hz, 170Hz, 350Hz, 1kHz, 3.5kHz, 10kHz) のゲイン調整とプリセット選択を行います。
- ステータスバー
- 曲数・合計再生時間・セッション EXP を表示します。
音源の取り込み
- ヘッダーの「音源を追加」をクリックし、取り込みたいファイルを選択します。
- 選択したファイルのうち、音声形式かつサイズ制限と曲数上限を満たすものだけが登録されます。
- 登録後は自動的に IndexedDB (
mini_music_player_db) に保存され、曲リストに追加されます。
新しく追加された曲は、メタデータが取得でき次第、長さ情報が自動で更新されます。
プレイリスト管理
- 曲カードをクリックすると選択・再生します。再生中カードはハイライトされます。
- 検索ボックスで部分一致検索が可能です (元のファイル名 / 「名称未設定」のローカライズ名を対象)。
- カード右端の / / / ボタンで再生・順番移動・削除を行います。
- 曲名をダブルクリックするとリネームダイアログが開き、160 文字まで変更できます。
- 設定メニューの「ライブラリを全削除」で全曲を一括削除できます (確認ダイアログあり)。
再生操作
- 再生中はシークバーがリアルタイム更新され、経過時間と残り時間が表示されます。バーをドラッグしてシークできます。
- 音量スライダーは 0〜1 を 0.01 刻みで調整し、ブラウザのマスターボリュームとは独立します。
- 再生速度は 0.5〜2.0 倍を 0.05 刻みで変更できます。速度変更は永続化され、次回起動時にも引き継がれます。
- 終了時の挙動はループモードとシャッフル設定に従います。
ループなし: 最後の曲で停止／
1曲リピート: 現在の曲を最初から再生／
全曲リピート: 次の曲に移動し、末尾では先頭へ戻ります。 - シャッフル再生を有効にすると、現在の曲以外からランダムに次曲が選ばれます。
イコライザーとプリセット
- 各バンドは -12〜+12 dB を 0.5 dB 刻みで調整できます。変更するとプリセットは自動的に「カスタム」に切り替わります。
- 利用可能なプリセットは「フラット」「ロック」「ボーカル」「低音強調」です。選択すると各バンドが即座に設定されます。
- プリセット選択は 30 秒ごとに EXP を獲得できます (詳細は後述)。
ビジュアライザー
再生中のみ波形と周波数スペクトラムが更新されます。再生停止または AudioContext が停止すると描画も停止します。 スペクトラムには直近のピーク値がラインとして表示されます。
EXP 獲得ルール
| アクション | 獲得量 | 備考 |
|---|---|---|
| アプリを開く | +5 | 初期化完了時に加算 |
| 初めて再生を開始 | +2 | セッション中 1 度のみ |
| 音源を取り込む | +3 | 曲ごとに付与 |
| 曲を最後まで再生 | +10 | ループ再生にも適用 |
| EQ プリセットを適用 | +1 | 30 秒クールダウンあり |
獲得した EXP はセッションごとに集計され、画面下部の「Session EXP」に表示されます。
データ保存と同期
- 音源ファイルとメタ情報は IndexedDB (
mini_music_player_db/tracksストア) に保存されます。 - プレイリスト順序、現在位置、音量・速度・EQ 設定、ループ／シャッフルの状態は
localStorage['mini_music_player_state_v1']に保存されます。 - 保存は 0.5 秒単位でデバウンスされ、再生位置や設定が更新されたタイミングで書き込まれます。
- ライブラリを手動で全削除すると IndexedDB のデータもクリアされます。
トラブルシューティング
- AudioContext の初期化に失敗した場合は、ブラウザの設定やタブのアクティブ状態を確認し、再度再生操作を行ってください。
- ファイルサイズ超過や曲数上限に達した場合はトースト通知で知らせます。不要な曲を削除してから再試行してください。
- IndexedDB の読み込みに失敗した場合は、ページの再読み込みやブラウザのストレージ設定の見直しを検討してください。
- トラックの読み込み失敗が続く場合は、当該ファイルを一度削除して再度取り込み直してください。