Skip to content

Repository files navigation

Personal Music YT Player

A static, no-backend YouTube playlist player. Your library lives in your browser, never in the cloud. Paste ids or links, build lists, press play.

It is live and runs entirely in your browser, nothing to install. If you are an agent, read SKILL.md first.

demo play a sample list player: YouTube IFrame API license: MIT backend: none runtime deps: 0 vanilla JS + ES modules tests: 100 passing

Redesigned hero and player UI Building and playing a list
Hero and player Building and playing a list

The page can be public; your playlists never are. They live only in your browser's localStorage, so there is nothing to host, no account, and nothing to leak. On top of the standard YouTube video you get a thumbnail-first queue and full transport controls, or flip the video off and use it as background audio.

Features

Build

  • Paste a Title, [songs] block (or a bare title for an empty list), or load one or more .md/.txt files in a single pick. Duplicate names are refused, never silently merged.
  • Add tracks by video id or any YouTube link, mixed and comma or newline separated. Bare ids auto-name from the real YouTube title.
  • Reorder by drag or arrows, rename, remove. Thumbnails for every list and track.

Play

  • Thumbnail queue, play / pause / stop, prev / next, seek, shuffle, loop, volume.
  • Video shows by default; "Show video" off turns it into pure background audio.
  • Play all merges your whole library into one queue, badged in red with the list each track is actually coming from. Shuffle then mixes everything.
  • Filter box: type, hit Enter, and it jumps straight to the first match.
  • Winamp-style keyboard shortcuts that ignore text fields.

Keep and share

  • Everything persists to localStorage; one button wipes it clean.
  • Export a list as a .md file or clipboard text, share it as a self-contained URL that rebuilds in someone else's browser, or download your entire library as a playlists.zip (one .md per list).

Using it

Use it live at: hec-ovi.github.io/music

Open the page, open the Playlists drawer, and paste into the box: a full Playlist Title, [songs] block, or just a title for an empty list (or import a file). Paste ids/links into the Add field, then click a track to play. Every row has its own collapse / rename / delete controls; the "?" button opens a quick visual guide.

Keyboard shortcuts follow the old Winamp layout. They listen page-wide: they fire no matter where focus sits (a button, the seek bar, a track row), and only a text field or the import box holds them off while you type. (Click into the embedded video and YouTube captures keys until you click back out.)

Z  previous          C  pause              <-  back 5s
X  restart current   V  stop               ->  forward 5s
B  next              Space  pause / resume

Ask an AI agent to turn a list of songs into the import format and paste the result. Agents should read SKILL.md; the full reference is in PLAYLISTS_FORMAT.md.

Run it locally

Only needed if you want to hack on it; otherwise just use the live link above.

npm install
npm test                  # vitest + jsdom: 100 unit and end-to-end UI tests
python3 -m http.server 8137   # then open http://localhost:8137/

ES modules need HTTP, so file:// will not work.

How it is built

No build step, no framework, zero runtime dependencies.

  • index.html is the GitHub Pages entry point; main.js mounts the app and wires the real YouTube IFrame player.
  • app.js renders the UI and runs playback. store.js is a pure, DOM-free layer for localStorage, URL/thumbnail helpers, and id/link parsing, tested on its own.
  • styles.css is the styling.

Publish straight from the main branch root:

gh api repos/<owner>/music/pages --method POST -f source.branch=main -f source.path=/

The repo can stay public: it carries no personal playlist data.

Notes and license

Playback runs through YouTube's official IFrame Player API, so videos stream from YouTube with their ads and embedding settings intact. This repo hosts no audio, video, or playlists (only fake placeholder ids), and you are responsible for adding only what you have the right to watch. Not affiliated with YouTube or Google. MIT, no warranty; see LICENSE.

About

Personal Music YT Player: a static, no-backend YouTube playlist player. Build playlists from video ids/links or an AI-agent bulk-import block; queue, shuffle, loop, reorder, seek, share links, optional audio-only mode. Plays via the official YouTube IFrame API (embeds only, no downloads); playlists live only in your browser's localStorage.

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages