winamp2-on-obs

Create a Winamp 2 Browser Source on OBS

If anyone ends up using this, I'd love if you showed me what you did :)

Demo (click)

Instructions

1. Download winamp2-on-obs.zip from releases
2. Unzip it (right-click, "Extract All..." > "Extract")
   • If you just want to copy the OBS scene I used in the Demo and go from there, import the winamp2onobs.json scene collection on OBS. That will, however, require you to update all of the Local file directories by coping the file as its path, the detail of which is seen below. You do this through a source's properties. Also, it requires OBS Shaderfilter for those which are a "User-definer shader"
3. On OBS, add a "Browser" source and name it "Webamp"
   • Enable the "Local file" checkbox, and set the Local file textbox to the directory of index.html located in the unzipped file. You can copy the path to this file on Windows by Shift + Right-Clicking it, and selecting "Copy as path". You will need to do this with other Local files you use, if you plan to do so
   • Set the Width to 640, and the Height to 360
   • Enable the "Control audio via OBS" checkbox
   • Once done, select OK
4. Under the Audio Mixer, click the three dots. Set the Webamp's Audio Monitoring appropriately, e.g. I use Desktop (Audio) so I set it to Monitor Only (mute output) to prevent an echo

• Whenever the Webamp Browser Source is refreshed (or just created), you need to select the Webamp Browser Source and click "Interact". From here, drag the top left part of the Webamp to the top left of the window, and drag the bottom right part of the Webamp to the bottom right of the window
  • Through the interact screen is how you can play songs, enable the loop, change the volume, etc., just like you would through Winamp 2 normally
• To add tracks or change the skin, right-click index.html and select "Open with" > "Notepad" (After, you can update the Webamp within OBS by selecting the Webamp Browser Source, and clicking "Refresh")
  • Change the tracklist by modifying, or creating more, of the track templates. A track requires the artist name, the title, and the name of the file as the url. For the url to work as simply the name of the file, it must be located in the same file directory as index.html from the unzipped file. You can delete the default ones if you want.
  • Change the skin by modifying the skin url (You can get a new skin by downloading one from the Winamp Skin Museum, and clicking [Download] at the bottom of the screen. After, copy the path just as you do for a track)
• Filters
  • I highly recommend using additional OBS filters from OBS Shaderfilter
  • On the Scene, I used Brightness and Sharpen from OBS, and bloom.shader, pixelation.shader, and VHS.shader from OBS ShaderFilter
  • On Sources e.g. Media Sources or Game Capture, I used Color Correction from OBS and drunk.shader from OBS ShaderFilter. I also used Image Mask/Blend with either feathered corners (for small sources).png or feathered corners (for big sources).png depending on how big I was gonna make it (tutorial). If you're going to feather the corners, you have to crop it through the filters with Crop/Pad, rather than just holding holding Alt on the preview and dragging.
  • If you'd like to see the exact settings I used for each filter, import the winamp2onobs.json scene collection on OBS

Credit

• Inspiration for this project came from this TikTok by @carpetedkitchn
• Webamp (what's used to create the Winamp 2 Browser Source) is from this GitHub repo by captbaritone
• The specific purple skin I used on Webamp was created by Peacemaker
• The images used for the feathered edges came from Infinite Quality on YouTube
• Additional OBS filters, e.g. VHS.shader or drunk.shader, came from OBS Shaderfilter. Here is the tutorial I used
• Uploaded to obsproject.com here