Web音声プレイヤー

Web音声プレイヤー

ローカルファイル、クラウドファイルを一元的にWebで再生できる音声プレイヤー

  • Next.js

# Web音声プレイヤー

# 概要

サーバ不要で動作する、音声ファイル専用のWeb音楽プレイヤーである。
File System Access API を用いてユーザーが選択したフォルダ/ファイルへアクセスし、ライブラリ情報（曲・プレイリスト・キュー・設定など）は IndexedDB に永続化する。

  • 想定用途：音源の再生、プレイリスト管理、再生中のブックマーク（フラグ）
  • 特徴：オフライン動作（ブラウザ内完結）、権限の再付与が必要なケースをUIで案内

# 想定ユーザー / ユースケース

  • ローカル、複数のクラウドにある音声ファイルを、一元管理・再生したいユーザー
  • 再生位置のメモ（フラグ）を残しながら学習・音声確認をしたいケース
  • 再生速度、スキップを細かく設定したいケース

# 使用技術（Tech Stack）

## フロントエンド

  • Next.js（App Router）
  • React
  • TypeScript

## UI / スタイリング

  • Tailwind CSS
  • Radix UI（UIプリミティブ）
  • motion（アニメーション）
  • lucide-react（アイコン）

## 状態管理 / データ

  • Zustand（アプリ状態・プレイヤー状態）
  • Dexie（IndexedDBラッパー、永続ストレージ）

## ブラウザAPI

  • File System Access API（フォルダ/ファイル選択、ハンドル永続化、権限管理）
  • HTMLAudioElement（再生基盤）

## 開発環境

  • Bun（インストール / 実行）
  • Biome（整形・Lint）

# 主な機能

  • ライブラリ管理
    • フォルダ/ファイル追加
    • 再スキャン（追加・削除の差分反映）
    • ルート削除（当該ルート由来の曲も削除）
    • 権限再付与が必要なルートの検出・表示
  • 曲一覧（ライブラリ）
    • 一覧表示・ページネーション
    • 曲の再生、キュー追加、プレイリスト追加
  • プレイリスト
    • 作成、名称変更、削除
    • 曲の追加、並び替え（ドラッグ&ドロップ）
  • 再生画面
    • 再生/一時停止、前/次、シーク
    • リピート/シャッフル、再生速度・音量調整
    • 再生キュー管理（並び替え・削除）
    • フラグ（ブックマーク）：時間位置にラベル付きで登録、ジャンプ/編集/削除
  • 設定
    • 再生速度などの設定、キーボードショートカット

# 工夫した点 / 技術的ポイント

  • クリーンアーキテクチャ寄りの分離
    • Domain（エンティティ・型）
    • Application（UseCase）
    • Infrastructure（Dexie/FS/Audioの実装）
    • Presentation（Next.js/React UI、状態管理）
  • ブラウザ権限の実運用を考慮
    • IndexedDBへハンドルを保存し、必要に応じて再許可を促す導線を用意
  • UIの操作感
    • DnDによるキュー/プレイリスト並び替え
    • アニメーションによる遷移・操作フィードバック

# 動作条件（重要）

  • File System Access API を利用するため、基本的に Chromium系ブラウザ（Chrome/Edge等） が必要である
  • HTTPS または localhost 上で動作する

# 今後の改善案

  • 大規模ライブラリ向けの高速化（メタデータの段階的読み込み等）
  • 音声メタ情報（アーティスト/アルバム/ジャケット）の取得・表示
  • 検索/フィルタ機能の強化
  • エクスポート/インポート（プレイリスト共有、バックアップ）

# スクリーンショット

  • ライブラリ画面：
  • プレイリスト画面：
  • 再生中画面：
  • 設定画面：
Back to Works