Arythm

An open-source web music player powered by YouTube Music.

Built with Next.js · Tailwind CSS · Zustand · Web Audio API

Live Demo · Report Bug · Request Feature

What is Arythm?

Arythm is a full-featured music streaming app that runs entirely in your browser. It connects to the YouTube Music catalog through the InnerTube API, giving you access to millions of songs with a clean, modern interface. No YouTube Music subscription required.

It works across desktop, tablet, and mobile, and can be installed as a PWA so it behaves like a native app.

Features

Playback

Stream any song from the YouTube Music catalog in high-quality audio
Instant playback -- audio URLs are resolved via the InnerTube Player API in ~200ms, with yt-dlp as a fallback
Full-screen player with blurred album artwork background and ambient color extraction via ColorThief
Queue management -- shuffle, repeat (one/all/off), and remove songs from the queue
Volume normalization via Web Audio API so quiet and loud songs play at similar levels
OS media controls -- play/pause/skip from your lock screen, notification shade, or Bluetooth headphones
Playback speed -- 0.25x to 4x
Local file support -- drag and drop or pick audio files from your device

Smart Auto-Queue

When you play a single song, Arythm automatically fills your queue with related songs from the same genre. It uses YouTube Music's radio API (RDAMVM{videoId}) as a seed, giving you continuous listening without lifting a finger.

Prefetch & Offline Resilience

Arythm preloads the next 2 songs as in-memory blobs and pre-resolves URLs for the next 5 as soon as the current song starts. If your internet drops mid-session, the next songs play seamlessly from the local cache. No buffering, no interruption.

Lyrics

4 lyrics providers -- LrcLib, KuGou, Musixmatch, and YouTube Music
Synced lyrics with Apple Music-style karaoke display (line-by-line highlighting, smooth font/color transitions)
Tap to seek -- click any lyric line to jump to that point in the song
Fast path -- returns synced lyrics as soon as the first provider responds (Promise.any), no waiting for slower providers
Pre-warm -- lyrics are fetched in the background when a song starts playing, so they're instant when you open the panel

Discovery

Personalized homepage -- Quick Picks, Song Suggestions, Mix Carousels, Playlist Recommendations, and Mood tiles, all powered by YouTube Music's home feed
Real-time search with autocomplete suggestions
Filtered results -- browse by Songs, Albums, Artists, or Playlists
Mood & genre browsing -- Chill, Workout, Focus, Night, Drive, Romance, and more
Artist, album, and playlist detail pages with full track listings
Personalized content when signed in with a YouTube Music cookie

Library

Like songs and access them from your library
Recently played history on the homepage
Create and manage playlists (syncs with YouTube Music if authenticated)
Listening statistics -- most played songs and artists
All library data is persisted in localStorage -- no account required

UI & Experience

Responsive layout -- sidebar on desktop, bottom tab bar on mobile
Dark theme with glassmorphism design (frosted glass cards, subtle transparency)
Ambient background -- dominant color extracted from album art, blurred across the entire page
Installable as a PWA on any device
Keyboard shortcuts -- spacebar to play/pause, arrow keys to seek, and more
Framer Motion animations throughout

Architecture

Arythm is a two-part system:

┌──────────────────────────────────────────────────────────────┐
│                     Arythm (Frontend)                        │
│                                                              │
│  Next.js app hosted on Vercel                                │
│  Handles: UI, search, browsing, queue, lyrics, library       │
│  Talks to: YouTube Music InnerTube API (server-side)         │
│            Arythm-Proxy (for CORS-safe audio streaming)      │
│            LrcLib, KuGou, Musixmatch (for lyrics)            │
└────────────────────────┬─────────────────────────────────────┘
                         │
          ┌──────────────┴──────────────┐
          │ Fast path (InnerTube)       │ Fallback (yt-dlp)
          │ POST /api/innertube/player  │ GET /stream?v=VIDEO_ID
          │ → 200ms URL resolution      │ → 3-10s URL resolution
          │ → GET /stream?url=...&v=... │
          ▼                             ▼
┌──────────────────────────────────────────────────────────────┐
│                   Arythm-Proxy (Backend)                     │
│                                                              │
│  Express server hosted on Render                             │
│  Handles: Piping audio bytes from googlevideo.com with CORS  │
│           Resolving URLs via yt-dlp (fallback only)          │
│           Request deduplication (one yt-dlp per video)       │
│           Caching resolved URLs for 5 hours                  │
│           Forwarding Range headers for seeking               │
└──────────────────────────────────────────────────────────────┘

Why a separate proxy? YouTube's audio servers (googlevideo.com) don't set CORS headers, so browsers block direct playback. The proxy fetches audio server-side and pipes it back with proper CORS headers.

Tech Stack

Layer	Technology	Purpose
Framework	Next.js 16 (App Router)	Server-side rendering, API routes, file-based routing
UI	React 19	Component architecture
Language	TypeScript 5	Type safety across the entire codebase
Styling	Tailwind CSS v4 + Framer Motion	Utility-first CSS + smooth animations
State	Zustand	Lightweight stores for player, library, and settings
Audio	HTML5 Audio + Web Audio API	Playback engine + volume normalization
Music API	YouTube Music InnerTube	Search, browse, home feed, radio, player, artist/album pages
Lyrics	LrcLib + KuGou + Musixmatch + YouTube Music	4-provider synced and plain lyrics
Audio Proxy	Express + yt-dlp	CORS-safe audio streaming with URL resolution fallback
Color	ColorThief	Dominant color extraction for ambient backgrounds
Icons	Lucide React	Consistent icon set

Getting Started

Prerequisites

Node.js 20 or later
npm (comes with Node.js)

1. Clone and install

git clone https://github.com/aryanjsx/Arythm.git
cd Arythm
npm install

2. Set up environment variables

Create a .env file in the project root:

YOUTUBE_COOKIE=""
AUDIO_PROXY_URL="https://your-proxy.onrender.com"
NEXT_PUBLIC_AUDIO_PROXY_URL="https://your-proxy.onrender.com"

Variable	Required	Description
`YOUTUBE_COOKIE`	No	Your YouTube Music cookie. Enables personalized home feed, recommendations, lyrics from YouTube Music, and library sync. Without it, you still get generic content.
`AUDIO_PROXY_URL`	Yes	URL of your Arythm-Proxy instance (server-side usage).
`NEXT_PUBLIC_AUDIO_PROXY_URL`	Yes	Same URL, exposed to the browser for client-side streaming.

How to get your YouTube Music cookie

Open music.youtube.com in Chrome and sign in
Press F12 to open DevTools, go to the Network tab
Click on any request to music.youtube.com
In the request headers, find the Cookie header and copy its full value
Paste it as YOUTUBE_COOKIE in your .env file

This cookie is used server-side only and never sent to the browser.

3. Start the dev server

npm run dev

Open http://localhost:3000 in your browser.

4. Deploy the audio proxy

The frontend needs the Arythm-Proxy running separately. See the Arythm-Proxy README for setup instructions.

Project Structure

src/
├── app/                            # Next.js App Router
│   ├── page.tsx                    #   Homepage
│   ├── search/page.tsx             #   Search results
│   ├── album/[id]/page.tsx         #   Album detail
│   ├── artist/[id]/page.tsx        #   Artist detail
│   ├── playlist/[id]/page.tsx      #   Playlist detail
│   ├── browse/[id]/page.tsx        #   Mood/genre category
│   ├── library/page.tsx            #   User library
│   ├── history/page.tsx            #   Play history
│   ├── stats/page.tsx              #   Listening statistics
│   ├── settings/page.tsx           #   Preferences
│   ├── mood-and-genres/page.tsx    #   Browse by mood & genre
│   ├── login/page.tsx              #   YouTube Music authentication
│   ├── icon.tsx                    #   Dynamic favicon
│   └── api/
│       ├── innertube/              #   YouTube Music API proxy
│       │   ├── browse/route.ts     #     Home feed, artist, album, playlist, moods
│       │   ├── search/route.ts     #     Search + autocomplete suggestions
│       │   ├── player/route.ts     #     Stream URLs, formats, loudness
│       │   ├── next/route.ts       #     Radio queue (related songs)
│       │   └── playlist/route.ts   #     Playlist CRUD, like/unlike
│       ├── lyrics/route.ts         #   4-provider lyrics (LrcLib, KuGou, Musixmatch, YTM)
│       ├── stream/                 #   Audio stream helpers
│       └── auth/route.ts           #   YouTube auth check
│
├── components/
│   ├── home/                       # Homepage sections
│   │   ├── HeroSection.tsx         #   Greeting banner
│   │   ├── QuickPickGrid.tsx       #   Song card grid
│   │   ├── SongSuggestionRow.tsx   #   Horizontal song list
│   │   ├── MixCarousel.tsx         #   YouTube Music mixes
│   │   ├── PlaylistSuggestionRow.tsx   # Playlist recommendations
│   │   ├── PlaylistCarousel.tsx    #   Mixed-content carousel
│   │   ├── MoodCategoryRow.tsx     #   Mood tiles
│   │   └── RecentlyPlayed.tsx      #   Recently played grid
│   ├── player/                     # Audio player
│   │   ├── player-wrapper.tsx      #   Root: mounts mini + full player
│   │   ├── mini-player.tsx         #   Bottom bar controls
│   │   ├── full-player.tsx         #   Full-screen player with artwork
│   │   ├── player-controls.tsx     #   Play/pause, seek, volume
│   │   ├── queue-panel.tsx         #   Queue list
│   │   ├── lyrics-view.tsx         #   Synced lyrics display
│   │   └── AmbientBackground.tsx   #   Blurred artwork background
│   ├── music/                      # Reusable music item components
│   └── layout/                     # Sidebar, header, bottom nav
│
├── lib/
│   ├── audio/player.ts             # PlayerService singleton
│   │                               #   HTML5 Audio + Web Audio API
│   │                               #   InnerTube-first URL resolution (~200ms)
│   │                               #   Prefetch next 2 songs as blobs
│   │                               #   Pre-resolve next 5 URLs via InnerTube
│   │                               #   Auto-queue related songs
│   │                               #   Pre-warm lyrics on song change
│   │                               #   Media Session integration
│   ├── innertube/                  # YouTube Music InnerTube client
│   │   ├── innertube.ts            #   API functions (search, browse, player, next)
│   │   ├── parsers.ts              #   Response → typed objects (Song, Album, etc.)
│   │   ├── client.ts               #   Client configs (WEB_REMIX, ANDROID, IOS, etc.)
│   │   ├── auth.ts                 #   Cookie auth + SAPISID hash generation
│   │   └── stream.ts              #   youtubei.js session management
│   └── lyrics/                     # Lyrics providers
│       ├── lrclib.ts               #   LrcLib (synced + plain)
│       ├── kugou.ts                #   KuGou (synced + plain)
│       ├── musixmatch.ts           #   Musixmatch (synced + plain)
│       └── youtube-music.ts        #   YouTube Music (plain, via InnerTube)
│
├── stores/                         # Zustand state management
│   ├── player-store.ts             #   Queue, playback state, repeat/shuffle
│   ├── library-store.ts            #   Liked songs, recently played, playlists
│   └── settings-store.ts           #   Theme, preferences
│
├── hooks/                          # React hooks
│   ├── use-player.ts               #   Initialize PlayerService, expose controls
│   ├── use-lyrics.ts               #   Fetch/cache lyrics, sync with playback time
│   ├── use-keyboard-shortcuts.ts   #   Global keyboard bindings
│   └── use-local-files.ts          #   Local audio file playback
│
└── types/                          # TypeScript definitions
    ├── music.ts                    #   Song, Album, Artist, Playlist, Lyrics, etc.
    └── innertube.ts                #   InnerTube request/response types

How It Works

Playing a Song

User clicks a song anywhere in the app
playSong(song) sets the queue and increments _playbackGeneration in the Zustand store
PlayerService detects the generation change and calls onPlaybackTriggered(song)
URL resolution (fast path): calls /api/innertube/player to get a direct googlevideo.com audio URL (~200ms)
Passes the URL to the proxy: GET /stream?url=<direct_url>&v=<videoId> -- the proxy just pipes bytes, no yt-dlp needed
If InnerTube fails, falls back to GET /stream?v=<videoId> where the proxy resolves via yt-dlp
audio.play() is called and the browser starts playback as data arrives
After playback starts:
- Auto-queue fires if only 1 song in queue -- fills queue with related songs via InnerTube radio API
- Prefetch downloads the next 2 songs as blobs for offline resilience
- Pre-resolve warms InnerTube URL cache for the next 5 songs
- Lyrics pre-warm fires the lyrics API request so lyrics are cached before the user opens the panel

Lyrics Resolution

All 4 providers are queried in parallel. Promise.any returns immediately when the first provider delivers synced lyrics. If none have synced lyrics, it falls back to Promise.all and picks the best plain text result. Results are cached server-side for 10 minutes and client-side per session.

Homepage Sections

The homepage fetches YouTube Music's home feed via InnerTube and categorizes each section:

Section	Detection	Component
Quick Picks	First all-songs section	`QuickPickGrid`
Song Suggestions	Remaining all-songs sections	`SongSuggestionRow`
Mixes	All-playlist sections with "mix"/"radio" in title or radio IDs	`MixCarousel`
Playlists	All-playlist sections (non-mix)	`PlaylistSuggestionRow`
Mixed	Sections with albums + playlists + songs	`PlaylistCarousel`
Moods	Static mood/genre tiles	`MoodCategoryRow`

Attribution

InnerTune / OuterTune -- inspiration
LrcLib -- synchronized lyrics
KuGou -- lyrics provider
Musixmatch -- lyrics provider
yt-dlp -- YouTube audio extraction (fallback)

License

This project is for educational purposes only. It is not affiliated with or endorsed by Google. YouTube Music is a trademark of Google LLC.

Made by aryanjsx

Back to top

Name		Name	Last commit message	Last commit date
Latest commit History 19 Commits
prisma		prisma
public		public
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
.mailmap		.mailmap
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Arythm

What is Arythm?

Features

Playback

Smart Auto-Queue

Prefetch & Offline Resilience

Lyrics

Discovery

Library

UI & Experience

Architecture

Tech Stack

Getting Started

Prerequisites

1. Clone and install

2. Set up environment variables

3. Start the dev server

4. Deploy the audio proxy

Project Structure

How It Works

Playing a Song

Lyrics Resolution

Homepage Sections

Attribution

License

About

Uh oh!

Releases

Packages

Languages

aryanjsx/Arythm

Folders and files

Latest commit

History

Repository files navigation

Arythm

What is Arythm?

Features

Playback

Smart Auto-Queue

Prefetch & Offline Resilience

Lyrics

Discovery

Library

UI & Experience

Architecture

Tech Stack

Getting Started

Prerequisites

1. Clone and install

2. Set up environment variables

3. Start the dev server

4. Deploy the audio proxy

Project Structure

How It Works

Playing a Song

Lyrics Resolution

Homepage Sections

Attribution

License

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages