ishLab / Portfolio
B-Side Radio logo

Project 03

B-Side Radio

A deterministic, always-on internet radio player that derives a shared HLS schedule from time and precomputed track metadata.

B-Side Radio by That’s My Ish Radio is a stateless internet radio player that gives listeners a shared, live-programming experience. Arrival time determines the track and in-track playback position, so listeners join the same point in the schedule.

Scheduling model

The schedule is a pure function of time:

index = floor((now - epoch) / slotLength) % N

A fixed epoch, slot length, and playlist are enough to calculate the active track and playback position. The runtime comprises read-only schedule endpoints and precomputed track metadata; database, KV, cron, queue, and central playback services are not runtime dependencies. Programming is prepared ahead of time; live DJs are not part of runtime scheduling.

Implementation details

  • Shared playback position: Each client calculates the same schedule slot and in-track offset from the current time.
  • Precomputed programming: A randomized playlist is prepared ahead of time and published as a server-generated tracks.json file.
  • Join-in-progress playback: hls.js seeks to the calculated position when a listener arrives.
  • Direct asset delivery: Cloudflare R2 serves audio, artwork, waveform data, HLS playlists, and metadata.
  • Read-only scheduling: Clients derive playback from time and track metadata, so the schedule does not require runtime writes.

Tech stack

  • Next.js Pages Router for the listener-facing web application
  • TypeScript for application and scheduling logic
  • Cloudflare Pages and Workers for globally distributed deployment
  • Cloudflare R2 for HLS audio segments and visual assets
  • hls.js for adaptive browser audio playback, with native HLS support on Safari
  • Zustand for client-side state management
  • Biome for formatting and static analysis
  • Mutagen for preparing audio assets and metadata during encoding

Playback workflow

Tracks are encoded into HLS segments and published to Cloudflare R2 with their artwork, waveform data, playlists, and metadata. The pre-shuffled tracks.json file defines the programming order.

When a listener opens the station, the frontend:

  1. Calculates the active schedule slot from the current time.
  2. Fetches the corresponding track metadata and HLS playlist.
  3. Calculates the in-track playback position.
  4. Seeks the HLS player to that position.
  5. Updates the now-playing visuals from the same precomputed data.

Each client performs these steps independently using the same epoch, slot length, playlist, and metadata.