feat: Add in-browser song playback

[Bentroen]

Overview

This PR adds the long-awaited in-browser song player to the website, removing the need to open the song externally in NBS or use the separate nbsvis page.

The player is provided by nbsvis, the browser player component that's been in development since March 2025. It's powered by the Pixi.js library for graphics and a custom audio engine for playback that leverages AudioWorklet and a dedicated audio rendering web worker to achieve 2,000+ concurrent sounds, even on mobile devices.

In this PR, we implement our own custom playback controls to address the lack of native controls in nbsvis. Some library changes are still pending to make it production-ready; many are already tracked in the lib's own TODO, but we'll also track them here since they're relevant to the PR's progress.

TODO

NB: This list is not exhaustive; we may discover more pending work as we develop the features below.

nbsvis

• Implement volume controls
• Remove solid color background
• Remove fixed debug overlay / replace with F3 toggle and DOM elements
• Fix disappearing note sprites
• Implement seek/song time in seconds
• Browser media player controls

NBW (this codebase)

Global

• Store current song/time in local storage; load it when the page is loaded
• Fix error message/loading state display in player preview
• Pointer cursor on playback/volume slider bar (no)
• Increase width of slider's interactive area (too narrow to target with mouse)
• Fix 'ricochet' effect after seek
• Cache-Control is set to no-store on static assets (redownloads on every song load)
• Should playback continue on the login page?

Large player / Song page

• Implement in-page player controls (seek, play/pause, loop, volume, fullscreen, collapse, PIP)
• Autoplay when entering page (may not always work; check https://developer.chrome.com/blog/autoplay)
• Implement fullscreen
• Implement picture-in-picture (video component)
• Display loading state while loading next song

Bottom bar / Miniplayer

• Expand button in player preview
• Overlay in miniplayer with expand icon
• Display bottom bar when large player leaves the viewport
• Display loading state while loading next song
• Set miniplayer to thumbnail while loading next song
• Replace scene background with thumbnail image/background color

Backend

• Register play count in backend when playing a song
• Fetching private songs does not work (e.g. http://localhost:3000/song/vQZsGZ8jQO)

Later / Post-launch

• View transitions (Framer Motion)
• Auto-play next recommended song
• Playback stats (tracking time listened, loop count, etc.)
• nbsvis: faster song parsing
• nbsvis: smooth pause/play/seek
• Replace login page with popup to avoid stopping playback?

[railway-app]

🚅 Deployed to the NoteBlockWorld-pr-99 environment in Note Block World

Service	Status	Web	Updated
Next.js frontend Bun	⏭️ Skipped (View Logs)	Web	Sep 17, 2026 at 2:59 am UTC
Nest.js API Bun	⏭️ Skipped (View Logs)	Web	Sep 17, 2026 at 2:59 am UTC