Proscris Music

About This App

This is the Proscris Music Player — a custom-built, browser-based music application by Robert Szopa (Proscris). It hosts my AI-generated music collection (EDM, Rock, Metal) and also lets you load and play your own local audio files privately in your browser. Inspired by Spotify but designed with a sleeker, more dynamic interface.

Everything runs client-side. Your local files never leave your device. The app is also a Progressive Web App (PWA) — install it to your home screen and use it offline.

Tabs Overview

• Local Files — Your local music library. Drag-and-drop audio files anywhere on the page, or use the Folder/Files buttons. Files are processed in your browser, ID3 tags are read for metadata, album artwork is extracted from APIC frames. Tracks persist across sessions via IndexedDB.
• Playlists — Custom playlists from any track. Use the + button on any track to add to queue or playlist. Play, shuffle, rename, delete.
• Songs — The main Proscris music catalog. Filter by genre, sort by date or alphabetically.
• Favorites — Tracks you've hearted.
• Albums — Browse music grouped by album.
• Genres — Visual grid of genre cards.
• Search — Universal search across Proscris music and your local library.
• About — This page.

Player Bar

Desktop bar: Track info + heart, playback controls (Shuffle, Prev, Play/Pause, Next, Repeat with "1" superscript on repeat-one), Visualizer, Info, Mic, Volume, 3-dots menu.

Mobile bar: Track info, playback controls, and 3-dots menu only — everything else is in the helper bubbles for a clean compact UI.

The 3-dots menu opens a vertical helper bubble fan containing all secondary controls: Settings, Visualizer, Info, Lyrics, Queue, Share. On mobile, opening the 3-dots also auto-activates the mic — making voice control hands-free.

Voice Commands

Voice control works hands-free. On mobile, opening the 3-dots menu auto-triggers the mic. On desktop, click the mic button. Supported commands:

• Playback: "play", "pause", "stop", "next", "previous", "skip", "resume"
• Track-specific: "play [song name]"
• Volume: "louder", "quieter", "volume up", "volume down"
• Modes: "shuffle on", "shuffle off", "repeat"
• Favorites: "like", "favorite"
• UI panels: "queue", "lyrics", "info", "share", "visualizer", "settings", "close"
• Tabs: "favorites", "playlists", "albums", "genres", "search", "local files", "songs", "about"

Voice can be toggled in Settings.

Visualizer

Three modes — switchable via the left/right chevrons that appear on hover/touch in fullscreen, or by pressing the mode select in Settings:

• Spectrum — classic frequency bars + circular waveform ring + drifting particles
• Center-Out — mirrored bars from center + energy arcs + time-domain wave
• Winamp Classic — retro LED bars with peak hold + oscilloscope + CRT scanlines

Press V to open. Tap the chevrons on the sides in fullscreen. The mode name appears at the top while controls are visible. Theme color carries through.

Smart Caching & Buffering

Service Worker scoped to /music/ for offline-first audio playback. Streamed songs are automatically cached. Played songs are available offline next time. Buffer is preloaded ~30 seconds before track end for smooth transitions. If a track stalls, recovery falls back to the cached copy or skips to next.

Audio Features

• 10-band Equalizer — 32Hz to 16kHz, six presets (Flat, Bass, Treble, Rock, EDM, Vocal) plus custom sliders
• Crossfade — smooth 1–10 second fade between tracks
• Gapless playback — album tracks play with zero silence between them
• Volume boost — up to 200% via Web Audio API GainNode
• A/B Loop — press A to set start, B to set end, C to clear
• Repeat modes — off / repeat all / repeat one (with "1" superscript indicator)
• Waveform scrubber — real audio waveform decoded client-side, displayed on the progress bar
• Synced lyrics (LRC) — auto-highlighting lyrics if track has LRC timestamps
• Shareable timestamps — copy a link with current playback time baked in

Welcome Modal & Genre Preference

On your first visit, a welcome modal greets you and lets you optionally pick a preferred genre (EDM, Rock, Metal, or All). Picking a genre auto-navigates you to that view.

Helper Bubble Menu (3-Dots)

The 3-dots button opens a vertical fan of helper bubbles with smooth staggered animation. All bubbles are always accessible regardless of screen size. The Settings bubble at the top is highlighted. Click any bubble to fire its action — the menu auto-closes after.

On mobile, opening the 3-dots also auto-triggers the mic so you can immediately speak commands. Hover any bubble (desktop) to see its label expand horizontally. Click outside to close. Press Esc to close panels.

Themes & Customization

8 preset color themes (Green, Purple, Blue, Teal, Rose, Orange, Amber, Indigo) plus a Custom mode where you can pick any HSL value via three sliders. Theme affects the entire player including the visualizer's color palette.

Lock Screen & Hardware Controls

Implements the Media Session API: when playing on mobile, OS-level lock-screen controls and notifications appear with track artwork, title, artist, and play/pause/next/previous buttons. Bluetooth headphone buttons and car stereo media controls work too.

Privacy & Storage

• localStorage — preferences (theme, volume, EQ settings, voice toggle, etc.) and your favorites/playlists
• IndexedDB — local audio file blobs (so they survive page reloads)
• Cache API — Proscris music for offline playback (rolling 250 MB limit, LRU eviction)

None of this leaves your device. No account, no tracking, no server backend for user data.

Tech Stack

Pure vanilla JavaScript modules. No frameworks. WordPress backend serves the music post type. Web Audio API for visualizer, EQ, gain boost, and waveform analysis. Service Worker for PWA offline mode. IndexedDB for local file persistence. Cache API for audio caching. Speech Recognition API for voice. Media Session API for hardware controls. webkitdirectory for folder loading.

Roadmap

• Audio visualizer (3 modes, chevron nav) ✅
• 8 color themes + custom HSL ✅
• Local Files library ✅
• Smart caching ✅
• PWA / offline mode ✅
• Drag-and-drop loading ✅
• Crossfade + Gapless ✅
• 10-band EQ + presets ✅
• Volume boost (200%) ✅
• Up Next queue with drag reorder ✅
• A/B loop ✅
• Waveform scrubber ✅
• Lyrics sync (LRC) ✅
• Voice commands + UI/tab nav ✅
• Auto-mic trigger on mobile 3-dots ✅
• Shareable timestamps ✅
• Smart playlists ✅
• Media Session API ✅
• Welcome modal with genre preference ✅
• Helper bubble 3-dots menu ✅
• Repeat-one superscript indicator ✅
• Sticky add-to-queue button ✅
• AI music generator (planned)

About the Creator