The Sound Alerts browser source is the media player that plays all the audio and displays the visual alerts of the alerts played by your viewers. This source needs to be implemented in your streaming software (like OBS) in order to broadcast the sounds and the visuals to your Twitch stream. The following guide shows you how to include the browser source in different broadcast tools.
- You can also watch our video guide to complete the setup of the browser source.
- Do you not stream with a PC? Please refer to this guide.
- Have you already implemented the browser source? Install the Sound Alerts Twitch Extension or Add your first sound buttons
OBS Studio
Head over to your Sound Alerts Dashboard, scroll down until you see this on your screen, and press "I use OBS Studio". Moving forward, you have 2 options:
Option 1) Drag & Drop
Hover over the "Drag & Drop me into OBS" button and drag it into your OBS Studio scene collection in which you want to use Sound Alerts as a browser source. Press "Yes" in the popup window to add it with success.
Note: This only works if you are using OBS Studio Version 25.0.X or above!
Option 2) Copy & Paste
Click on "Use copy & paste method". Now you can either just copy the URL with Ctrl + C or use the paperclip image on the right.
Note: Do not share this URL with anyone! If you did it by mistake, click on "REGENERATE URL" to create a new URL.
Now head over to your OBS Studio and click the little + icon to add a browser source and paste your browser source URL into the "URL" bar and click "OK".
Streamlabs OBS
Step 1)
To add Sound Alerts as a browser source in your Streamlabs OBS setup, press the “+” button in your sources tab.
In the window that pops up, you want to choose "Browser Source" and click on "Add Source" afterward.
Step 2)
Head over to your Sound Alerts Dashboard and click on "I use something else". Copy the link you get and paste it into your Streamlabs OBS browser source properties — just like in the screenshot shown below.
Twitch Studio
Step 1)
First, you want to add a new layer in Twitch Studio. To do that, you click the "+ Add Layer" button and select "Browser Source" in the popup window.
Step 2)
Press "Add" and may change the browser source name to something like "Sound Alerts" so it's easier for you to find it if you use multiple sources. To change the source properties, you now want to click the Sound Alerts source. On the right site, you now see your browser source settings. Here you can change the size, style, and other properties.
Step 3)
Head over to your Sound Alerts Dashboard and choose that you want to "Use something else". Copy the URL below and paste it into your Twitch Studio to the "Webpage" section. If it shows the SoundAlerts Logo, you're fine and good to go.
To ensure everything works, please use the settings "Size & Position" & "Additional Options" shown in the picture above to play a test sound on your SoundAlerts Dashboard.
Note: Don’t forget to click on the "Save" button on the bottom after you save something!
XSplit Broadcaster
To install the Sound Alerts browser source for XSplit Broadcaster, click on "Add source" and choose the "Webpage..." option. Here you can just paste your browser source URL you can find on your Sound Alerts Dashboard.
Note: If you want to test if everything is working, use the "PLAY TEST ALERT" button on the Sound Alerts Dashboard.
Sound Alerts in your other Scenes
The next step is to copy and paste your newly implemented Sound Alerts browser source to your other scenes. Please refer to this [guide](Link use-browser-source-in-other-scenes)
