Knowledge Base

How to add the SYQEL Windows Web App as a Browser Source in OBS

You can add your online (aka URL based) SYQEL account to OBS for streaming. However, you can’t just stick your URL in as a browser source right when you sign up for your account, because then your desktop audio won’t actually capture audio. This means that it won’t have anything to react to.

But have no fear, because we have made a way for those who do not want to get the desktop app to still use OBS and SYQEL, together.

You will still use a URL as a browser source. But first, you need to take the following steps:

Note: You must already have OBS to connect SYQEL to OBS.

If you do not already have OBS installed, go do that first, then come back to this tutorial.

Step 1: Sign up for a SYQEL account. (If you’ve already done this, skip this part.)

On the top right side of the SYQEL website is a green “Sign Up” button. Click on that (or this link) and fill out the required information (name, email, password, etc.)

This account acts as your web-based music visualizer. Keep the web-based app open, as you’ll need to retrieve things from it later.

Step 2: Download the OBS Launcher file.

The OBS Launcher was created so that you can attach the online SYQEL app with OBS via the app’s browser.

The OBS Launcher is in the form of a batch file (.bat file) on Github.

Navigate to this page and click on the green “Code” button. Click “Download ZIP” to download the zip file containing the OBS launcher.

Step 2.1: Extract the .zip file.

Right click on the “OBS-Launcher-master” file after you have downloaded it. Click “Extract All.”

You should now be able to see the following, which are the contents of the “OBS Launcher” .zip file.

The syqelOBS Windows Batch File is the one we care about in this instance.

Keep this file explorer window open.

Step 3: Open the location of all the files that make up OBS.

Click the “Start” button and search for OBS. Then click “Open file location.”

Your file explorer should open to where OBS Studio is located. Then right click on OBS Studio and choose “Open File Location.” (Yes, you are supposed to “open file location” twice, it will totally make sense.)

Step 4: Add the syqelOBS Launcher file to the rest of OBS’s source files.

The file explorer window that has the syqelOBS Windows batch file should still be open. The window with all the OBS files should also be open.

Click on the syqelOBS batch file and move it over to the other window. This adds the file into the rest of OBS’s files, connecting SYQEL and OBS.

Step 5: Create a desktop shortcut of syqelOBS.

Now that syqelOBS has been moved over with the rest of OBS’s files, right click on syqelOBS and click “Create shortcut.

You should see the following icons on your home screen:

Step 6: Click on the “syqelOBS – Shortcut” icon to launch OBS.

Step 7: Copy your URL to use as a browser source in OBS.

If you have a free SYQEL account, then you do not have your own personal DJ URL, and you can’t use your own DJ logo. Instead, the SYQEL logo will show in the top left corner. (If you have a free account in general, you also don’t have access to all visuals. Pro Memberships are only $9/month. It’s something worth thinking about.) We feel for the broke DJs of the world, so we made sure that you can still use OBS to elevate your streams.

But, if you have a Pro Membership SYQEL account, then you do have your own personal DJ URL. You also have the ability to upload your own branded logo. You will use that to stream on OBS.

For the Free SYQEL Users:

Copy the URL https://app.syqel.com/app/mic.

For the Pro SYQEL Users:

Click on your Profile icon in the top right corner of the screen (when on your online account.) Under that, click “Settings,” then “Streaming Settings.”

Your screen should look like this:

Then, click on your DJ streaming URL (which is your own personal URL), which copies it to your clipboard.

Step 8: Add your SYQEL account URL to OBS as a browser source.

You need scenes in order to add media sources (aka your SYQEL account as a visual source). So, if you do not already have a scene, create one by clicking the + sign under “Scenes.”

Then click the + sign under “Sources”. Then click “Browser.”

You’ll have to give your new source a name. We recommend SYQEL (you’ll remember it, and also we’re slightly biased.)

After that, this screen will pop up:

Paste your URL (the standard browser address or your personal DJ URL, depending on membership plan) into the URL box. Then click “OK.”

Step 9: Stretch the visualizer to fit the screen.

When you fit click “OK,” the visualizer will load as a small box in the upper left hand corner.

That is probably not the desired effect.

Right click on the visualizer, then scroll down to “Transform.”

Then click “Stretch to Screen.”

Note: You may have to close OBS and then re-launch it to see the stretched screen in the “Program” window.

And that’s it. Stream away web app users.