AudioWeb

A web-based audio player built with Next.js, React, and TypeScript. Runs entirely in the browser with no backend or account required.

Live at aw.kasunc.uk

Features

• Supports MP3, FLAC, WAV, OGG and other common audio formats
• Drag and drop file loading
• Playlist management with shuffle and repeat modes
• 10-band equalizer with presets
• MilkDrop visualizer (butterchurn) synced to audio, with preset selection
• Synchronized lyrics display (.lrc)
• Album art extraction from embedded metadata
• Sleep timer
• Media Session API integration (browser/OS media controls)
• Responsive layout for desktop, tablet, and mobile

Getting Started

Requirements: Node.js 18 or higher

git clone https://github.com/KasunCSB/AudioWeb.git
cd AudioWeb
npm install
npm run dev

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

Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint

Keyboard Shortcuts

Key	Action
Space	Play / Pause
Arrow Left / Right	Previous / Next track
Arrow Up / Down	Volume up / down
M	Mute / Unmute
S	Toggle shuffle
R	Cycle repeat modes

Tech Stack

• Next.js - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Butterchurn - MilkDrop visualizer
• Lottie React - Animations
• JSMediaTags - Audio metadata

License

MIT - see LICENSE for details.