A guide to creating a Traktor 3 now playing overlay for OBS on MacOS
You can use this guide to get the track information out of Traktor and into other apps like OBS.
I’ve tried many of the Traktor “now playing” plugins, and none of them will work on my machine. I’ve even tried Now Playing and Traktor-NowPlaying, neither of which I could get to work on my M1 MacBook Pro running Monterey and Traktor 3.
After many failed attempts, I decided to roll out my solution which works perfectly (assuming you follow the steps below). This setup only needs to happen once, then you’re good to go. The good thing about this method is that it unlocks your track info, which can then be used in other places outside OBS.
Stage 1: Install Homebrew and Icecast
First, you will need to install the homebrew package manager. You can find out more about homebrew here: https://brew.sh/. You will need to install homebrew as it will help you easily install the packages you need to get everything working. To install homebrew paste /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" into your terminal and press enter
Once homebrew is installed, open your Mac Terminal and install Icecast using the command brew install icecast
What is Icecast and why do I need to install it?
Traktor can broadcast your music along with the artist name and track name over Icecast (a spinoff of Shoutcast, if you remember that!). You will need to install Icecast on your machine so you can capture the artist and track name and feed this to your OBS widget.
Stage 2: Configure Icecast and Traktor
Next, we need to configure Icecast to work on your machine. To do this, we must edit the Icecast config file, which can be found here /opt/homebrew/etc/icecast.xml
You can edit the file using whichever program you like, I use visual studio code, but TextEdit on mac will work as well.
The main things you want to change here are the username and password information found in the <authentication> block. If you scroll down the file you will find it. Change the username and password to something you will remember. Then change the port number to 8000 which is found in the <listen-socket> block. You will need to remember the port number for use later. Once you are done, save the file.
Now we have finished the setup, it’s time to start your Icecast server. To do this, type icecast -c /opt/homebrew/etc/icecast.xml into your terminal. This command starts Icecast using the config file we edited earlier in the process.
If all has gone to plan, your Icecast server is now set up and ready to start receiving metadata from Traktor.
Next, we will set up Traktor to send data to our Icecast server. To do this is straightforward, load up Traktor and go to preferences and go to Broadcasting. In there you should set up your broadcast options as
Address: 127.0.0.1
Port: 8000
Mount path: /
Password: *this should be your password from the config file*
Format: Ogg Vorbis, 11025 Hz, 32 kBit/s
Once you have done this, close the preferences pane and click the Audio Recorder button.
And then press the broadcast button. If you are successfully running your Icecast server the broadcast button will turn solid blue. If your broadcast button starts blinking, Traktor has not successfully connected to your Icecast server (I recommend reviewing the steps above if this happens to you).
Congratulations if you’ve made it this far, Traktor is now talking to your Icecast server which means you can now extract the information you need to create the now playing OBS overlay.
Stage 3: Creating the overlay and displaying it in OBS
To create the overlay we are going to make an HTML file that will contain the artist and track name. We can use this HTML file in OBS (or any other app which will accept HTML). Let’s begin.
The HTML file is super simple, you can use the one I’ve created by downloading it from this link: https://drive.google.com/open?id=1-5RKnNSZWjNuUhtkAUPPHrBSZuGwEExW&authuser=hello%40chrisrussell.co&usp=drive_fs.
For reference this is the HTML code:
<html>
<head>
<style>
body {
background: transparent;
font-family: sans-serif;
color: white;
font-size: 64px;
}
.now-playing {
font-size: 32px;
color: white;
}
.wrapper {
background: red;
display: inline;
}
</style>
</head>
<body>
<div class=”now-playing”>NOW PLAYING</div>
<div class=”wrapper” id=”track”></div>
<script> function update() {
fetch(“http://127.0.0.1:8000/status-json.xsl”)
.then((response) => response.json())
.then((data) => {
let artist = data.icestats.source.artist,
title = data.icestats.source.title; if (artist === undefined && title === undefined) return; document.getElementById(“track”).innerHTML = `${artist} — ${title}`;
});
} setInterval(update, 1000);
</script>
</body>
</html>
All the code does is fetch the metadata from the Icecast server API (http://127.0.0.1:8000/status-json.xsl) and inject it into the HTML every 1 second.
You will want to download the HTML file onto your desktop and then you can open it in your browser. Initially, the screen will be blank, but when you start playing music in Traktor the artist and track name will appear shortly after. There is a slight delay between when the track starts and when the name appears, this cannot be avoided.
Now we have our working overlay we need to put it into OBS. To do this, we must add a browser overlay that points to the HTML file. Watch the GIF below to see how this is done. You can play around with the height and width selection in the Browser properties window of OBS if you need.
Extra info
- You can customise the overlay in the Custom CSS panel, the styles you need to target are
bodyfor background,.now-playingfor the now playing text and.wrapperfor the artist and track name. - Each time you want to you the overlay you will need to ensure Icecast is running and you have connected Traktor via broadcast.
- The http://127.0.0.1:8000/status-json.xsl endpoint returns JSON data from Traktor, you can use this to create your own integrations/overlays/apps etc.
Thanks!
