Introduction

Want to show your viewers what song is playing during your stream? With Song Overlays Pro and OBS Studio, you can automatically display song information in real-time — no manual updates required.

This tutorial will walk you through setting up a "now playing" overlay that automatically detects any song playing on your Mac using Shazam technology and displays it beautifully in your OBS scene.

What you'll achieve:

  • Automatic song detection from any audio source
  • A customizable overlay that updates in real-time
  • Professional-looking "now playing" display for your stream

Screenshot placeholder: Final result showing OBS with song overlay

Prerequisites

Before we begin, make sure you have:

  • macOS 13.0 (Ventura) or later — Song Overlays Pro requires a recent version of macOS
  • OBS Studio installed — Download from obsproject.com if you haven't already
  • Song Overlays Pro — Available on the Mac App Store (one-time purchase of $9.99)

Step 1: Download and Install Song Overlays Pro

First, download Song Overlays Pro from the Mac App Store.

Screenshot placeholder: App Store download page

  1. Open the Mac App Store on your Mac
  2. Search for "Song Overlays Pro"
  3. Click Get and then Install
  4. Wait for the download to complete

The app is lightweight and installs quickly.

Step 2: Launch and Grant Permissions

When you first launch Song Overlays Pro, it will ask for microphone permission. This is required for Shazam to detect songs playing on your Mac.

Screenshot placeholder: Permission dialog

  1. Open Song Overlays Pro from your Applications folder
  2. When prompted, click Allow to grant microphone access
  3. If you accidentally denied access, go to System Settings > Privacy & Security > Microphone and enable Song Overlays Pro

Note: Song Overlays Pro listens to your Mac's system audio, not your physical microphone. All processing happens locally on your device — no data is sent to external servers.

Step 3: Start Song Detection

Now let's verify that song detection is working before adding it to OBS.

Screenshot placeholder: Main app window with detection active

  1. In Song Overlays Pro, make sure the Detection toggle is enabled (it's on by default)
  2. Play any song on your Mac — through Apple Music, Spotify, YouTube, or any other source
  3. Within a few seconds, you should see the song title and artist appear in the app

If detection isn't working:

  • Make sure your audio is playing at a reasonable volume
  • Check that microphone permission is granted in System Settings
  • Try restarting the app

Step 4: Copy the Overlay URL

Song Overlays Pro includes a built-in web server that generates your overlay. You'll add this as a browser source in OBS.

Screenshot placeholder: Server tab showing URL

  1. Click the Server tab in Song Overlays Pro
  2. Click Start Server if it's not already running
  3. You'll see a URL like http://localhost:8080
  4. Click the Copy URL button to copy it to your clipboard

Keep this URL handy — you'll need it in the next step.

Step 5: Add Browser Source in OBS

Now let's add the overlay to your OBS scene.

Screenshot placeholder: OBS Add Browser Source dialog

  1. Open OBS Studio
  2. In the Sources panel, click the + button
  3. Select Browser from the list
  4. Name it something like "Song Overlay" and click OK
  5. In the URL field, paste the URL you copied from Song Overlays Pro
  6. Set Width to 1920 and Height to 1080

Click OK to add the source.

Step 6: Configure Browser Source Settings

For the best results, configure these additional settings:

Screenshot placeholder: OBS Browser Source settings

  1. Right-click your new Browser source and select Properties
  2. Check "Shutdown source when not visible" — this saves resources when the source is hidden
  3. Check "Refresh browser when scene becomes active" — ensures the overlay reconnects if needed
  4. Leave Custom CSS empty (the app handles all styling)

Making the Background Transparent

By default, the overlay has a transparent background, so it will blend into your scene. If you see a colored background instead:

  1. Make sure the theme you selected in Song Overlays Pro supports transparency
  2. In OBS Browser Source properties, ensure no custom CSS is overriding the background

Step 7: Position and Resize the Overlay

Now position the overlay where you want it in your scene.

Screenshot placeholder: OBS scene with positioned overlay

  1. Click and drag the overlay to position it (commonly in a corner)
  2. Use the red handles to resize if needed
  3. Hold Shift while dragging corners to maintain aspect ratio

Tip: Most streamers place the "now playing" overlay in the bottom-left or bottom-right corner, where it's visible but doesn't obstruct the main content.

Step 8: Test Your Setup

Let's make sure everything is working together.

Screenshot placeholder: Final OBS scene with song displaying

  1. Make sure Song Overlays Pro is running with the server started
  2. Play a song on your Mac
  3. Watch OBS — the overlay should update automatically with the song information
  4. Try playing different songs to verify it detects changes

Success! Your stream now shows what's playing in real-time.

Customization Options

Song Overlays Pro offers extensive customization to match your stream's aesthetic.

Theme Selection

  1. In Song Overlays Pro, click the Theme tab
  2. Browse through 10 built-in themes
  3. Click any theme to preview it — changes appear instantly in OBS

Custom Colors and Fonts

  1. Go to Customize tab
  2. Adjust primary and secondary colors
  3. Choose from 15+ font options or upload your own
  4. Enable glow effects for extra visual pop
  5. Save your design as a custom theme for reuse

Orientation Options

  • Landscape — Wide layout, ideal for bottom overlays
  • Portrait — Tall layout, perfect for side panels

The overlay automatically refreshes when you make changes, so experiment until you find the perfect look!

Troubleshooting

Overlay Not Showing in OBS

  • Verify Song Overlays Pro's server is running (check the Server tab)
  • Make sure the URL is correct — it should start with http://localhost: followed by the port number
  • Try refreshing the browser source (right-click > Refresh)
  • Check if the browser source is visible (eye icon not hidden)

Song Not Detecting

  • Ensure microphone permission is granted in System Settings
  • Make sure audio is playing at an audible level
  • Check that Detection is enabled in Song Overlays Pro
  • Try playing a well-known song (obscure tracks may not be in Shazam's database)

Overlay Looks Wrong

  • Clear any custom CSS in the OBS browser source properties
  • Try a different theme in Song Overlays Pro
  • Ensure the browser source dimensions are set to 1920x1080

Performance Issues

  • Enable "Shutdown source when not visible" in browser source properties
  • Close the Song Overlays Pro preview window if not needed
  • Make sure your Mac meets the minimum requirements (macOS 13.0+)

Next Steps

Now that you have your basic overlay working, consider exploring these features:

Song Requests

Let your audience request songs by scanning a QR code! Song Requests is an optional subscription feature that adds real-time audience interaction to your stream.

  • Display a QR code overlay for viewers to scan
  • Manage requests with one-click status updates
  • Auto-detect when you play a requested song

Learn more about Song Requests

Discord Integration

Share what's playing to your Discord server automatically.

  1. Go to Discord tab in Song Overlays Pro
  2. Enter your Discord webhook URL
  3. Enable posting — now every song change posts to your channel

Join the Community

Have questions or want to share your setup? Join our Discord community to connect with other streamers and DJs.

Join Discord

Congratulations! You've successfully set up automatic song detection for your OBS stream. Your viewers will now always know what track is playing, making your broadcasts more engaging and professional.