VibeMusic

Modern web music player built with HTML, CSS, and Vanilla JavaScript.
The app lets users upload local audio files, read metadata, play tracks, manage a playlist, and keep data between sessions.

Demo Scope

• Upload MP3/WAV files (drag & drop or file picker)
• Extract metadata (title, artist, cover) from audio tags
• Play/Pause/Next/Previous controls
• Seek with progress bar
• Search tracks in playlist
• Delete tracks from playlist
• Persist playlist in IndexedDB
• Sync active track with URL history (?track=...)
• Basic offline behavior via Service Worker

Tech Stack

• HTML5 (semantic structure, forms, accessibility attributes)
• CSS3 (responsive layout, transitions, animations, media queries)
• JavaScript ES Modules (class-based architecture)
• Web Components (<playlist-track>)
• IndexedDB + LocalStorage
• Service Worker + Cache API (PWA shell caching)
• jsmediatags (metadata extraction from audio files)

Project Goal

Create a browser-based music player without backend dependencies, focused on:

• local file playback,
• clean user experience,
• persistent data storage,
• offline-ready shell behavior.

How It Works

1. js/main.js initializes popup, data layer, player, search, clouds, and service worker.
2. js/dataHandler.js validates files, reads metadata, computes duration, stores tracks.
3. js/storage.js persists/retrieves tracks from IndexedDB (skyTuneDB).
4. js/playlistRenderer.js + js/PlaylistTrack.js render each track as custom element.
5. js/player.js handles playback, UI sync, and History API navigation.
6. js/sw.js caches app shell and serves cached content in offline mode.

Metadata Rules

• Artist and cover are added only if these fields exist in audio metadata.
• If metadata is missing, fallback values are used (for example: unknown artist).

Internet Requirement for Upload

Track upload is blocked when internet is unavailable.
The app shows an error asking the user to reconnect before adding songs.

Project Structure

sem/
├─ index.html
├─ manifest.webmanifest
├─ README.md
├─ README2.0.md
├─ css/
│  ├─ style.css
│  └─ popUp.css
├─ js/
│  ├─ main.js
│  ├─ dataHandler.js
│  ├─ player.js
│  ├─ search.js
│  ├─ storage.js
│  ├─ playlistRenderer.js
│  ├─ PlaylistTrack.js
│  ├─ popup.js
│  ├─ cloud.js
│  └─ sw.js
└─ photo/
   ├─ *.svg
   ├─ *.jpg
   └─ finn.png

Screenshots

Main Player

Playlist and Search

Upload Popup

Known Limitations

• Service worker cache list references photo/pwa-icon.svg which should exist for full PWA icon support.
• Upload currently depends on internet availability by project rule.

Roadmap

• Volume control, repeat, shuffle
• Drag-sort playlist
• Improved cache strategy (stale-while-revalidate)
• Better memory cleanup for generated object URLs

License

Educational project.