Bunamp

Use Webamp as a transparent Browser source in OBS!

Preparation

• Bun must be installed (curl -fsSL https://bun.sh/install | bash)

Setup

bun install
bun run dev

→ Server runs at http://localhost:9002

Add Music & Skins

What	Where	Format
Music	./music/	.mp3 .ogg .flac .wav .aac .m4a
Skins	./skins/	.wsz .wal

Throw the files in, restart the server and you should see your Files popping up. You can select skins under Options → Skins.

Set up OBS

1. Create a Browser Source
2. URL: http://localhost:9002
3. Width/Height = Your Streaming Resolution (e.g. 1920 × 1080)
4. Custom CSS:

   body { background-color: rgba(0,0,0,0) !important; }

5. Enable „Control audio via OBS"
6. In the Audio Mixer → ⋮ → Monitor Only (mute output) (Cancels out Echo)

Window positioning

Configure the Standard-Layout in src/client.ts in Object DEFAULT_LAYOUT:

const DEFAULT_LAYOUT = {
  main:      { position: { x: 20, y: 20 } },
  equalizer: { position: { x: 20, y: 136 } },
  playlist:  { position: { x: 20, y: 136 } },
  milkdrop:  { position: { x: 295, y: 20 } },
};

e.g. for 1920×1080:

Where	x	y
Top left	20	20
Top right	1625	20
Bottom left	20	944
Bottom right	1625	944

In Order to apply the changes, you have to restart the Server (rebuilds client.js) and refresh your Browser Source.

Window Positions will be automatically written to localStorage and restored after a restart.

Project Structure

webamp-obs/
├── music/           ← MP3s etc. hier rein
├── skins/           ← .wsz Skins hier rein
├── src/
│   ├── client.ts    ← Webamp UI + DEFAULT_LAYOUT
│   ├── server.ts    ← Bun HTTP Server
│   └── public/
│       └── index.html
├── package.json
└── README.md

Find Skins

https://skins.webamp.org → Download → Put it in ./skins/