A dark, single-file music player that streams real tracks from YouTube.
No build step, no dependencies, no server. One HTML file — open it and it works.
- Plays real music. Paste any YouTube link and it streams the actual track through YouTube's official IFrame player.
- Search YouTube in-app — optional, needs a free API key (see below).
- Artwork everywhere. Real thumbnails as track icons, with a YouTube source badge.
- Ambient theming. The background wash samples the dominant colour of the current artwork and shifts with each track.
- Full transport — play/pause, next/previous, shuffle, repeat (off / all / one), scrubbable progress, volume, mute.
- Library, queue, and likes, all persisted to
localStorage. - Responsive down to mobile; respects
prefers-reduced-motion.
Open index.html in any modern browser. That's it.
Click + Add from YouTube, paste a link like https://youtu.be/…, and hit Add & play.
The paste-a-link flow needs no setup. To search YouTube from inside the app:
- Open the YouTube Data API v3 in the Google Cloud console.
- Enable the API, then create an API key.
- In Nocturne, click Add a free YouTube API key and paste it.
The key is stored in your browser's localStorage and is never transmitted anywhere except to Google's API.
| Key | Action |
|---|---|
| Space | Play / pause |
| Shift + ← / → | Previous / next |
| L | Like current track |
| S | Shuffle |
| R | Cycle repeat |
| M | Mute |
| / | Focus search |
Nocturne embeds YouTube's own player. It does not download, rip, extract, proxy, or re-host audio. Playback happens inside YouTube's iframe, so views and ad revenue reach the original uploader exactly as they would on youtube.com.
If you want a player that pulls audio out of YouTube, this isn't it — that violates the YouTube Terms of Service and, usually, copyright.
For freely licensed music, ccMixter and the Free Music Archive host remixes released under Creative Commons.
Committed dark theme — a music player is a single-world design, so there's no light variant by choice, not omission.
- Neutrals carry a faint indigo bias (
#08080d→#20202c) so they read as chosen rather than default grey. - One accent, a warm coral
#ff5c39, deliberately not the green you're expecting. - Ambient layer is the only place colour runs free — it's derived per-track from the artwork.
Vanilla HTML, CSS, and JavaScript. The only external pieces are the YouTube IFrame API, YouTube's thumbnail CDN, noembed for titles when a track is added, and — if you opt in — the YouTube Data API.