Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Create a Stream Countdown Timer for Twitch with JavaScript

TwitterFacebookRedditLinkedInHacker News

As you’ve probably seen, I’ve been ramping up The Polyglot Developer on Twitch, when it comes to live streaming developer content. What might not be obvious to the viewer of the live streams is the technical effort that’s involved in making the stream possible. For example, how do you position all the stream elements on the screen, or for that matter, broadcast a stream at all?

One of the things that took me a while to figure out was in regards to a countdown timer. I was broadcasting streams with a “Starting Soon” screen, but viewers didn’t actually know when the stream would start. Does “Starting Soon” imply a minute from now or ten minutes from now? Since I’m using Open Broadcast Studio (OBS), a countdown timer didn’t exist, so I had to go out and create one.

In this tutorial, we’re going to see how to create a countdown timer that can be used in your OBS project, or any project for that matter. We’re going to do this with simple JavaScript and HTML.

To get an idea of what I’m talking about, take a look at the following animated image:

OBS Countdown Timer with JavaScript

What comes next can be broken into two parts, the creation of the timer with JavaScript, and then adding it to Open Broadcast Studio (OBS) so it can be used for streaming on Twitch and similar platforms.

Building a Countdown Timer with JavaScript and HTML

The countdown timer doesn’t need to be complicated. Where I’m going with this is that we don’t need to use any frameworks, or even multiple files. We can accomplish everything that we want with just a few lines of code.

The logic will essentially be, take the current date and time, then subtract it from a goal date and time, and display the difference on the screen. This process will happen every one second to simulate a fluid looking timer.

Create a widget directory on your computer and inside of that directory add a countdown.html file.

Within the countdown.html file, add the following code:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="countdown"></div>
        <script src="https://momentjs.com/downloads/moment.js"></script>
        <script>
            // Logic here ...
        </script>
    </body>
</html>

The above code is just boilerplate. If you’ve ever worked with dates and times in JavaScript, you’ll know how much of a miserable experience it is. For this reason we’re going to use moment, a popular JavaScript library to do the job.

Any changes to the timer will render inside of the <div> tags with the countdown id.

So let’s start with the heavy lifting.

Inside the <script> tag from the above example, include the following:

<script>
    const goLive = moment("2020-03-20 07:00:00 PM", "YYYY-MM-DD hh:mm:ss A");
    setInterval(() => {}, 1000);
</script>

The goLive constant will represent when we want to take our stream live. Using a JavaScript setInterval, we can continually take the difference of the current time with the goLive time every one second.

So let’s expand upon this idea a bit.

<script>
    const goLive = moment("2020-03-20 07:00:00 PM", "YYYY-MM-DD hh:mm:ss A");
    setInterval(() => {
        let timeLeft = goLive.diff(moment());
        if(timeLeft > 0) {
            document.getElementById("countdown").innerHTML = moment(timeLeft).format("mm:ss");
        } else {
            document.getElementById("countdown").innerHTML = "00:00";
        }
    }, 1000);
</script>

Every time the setInterval function runs, we take the difference with the current time. The resulting date and time will be formatted to only display minutes and seconds. Rather than counting down into the negative, we stop the timer at a certain point.

As it stands, opening the countdown.html file in a web browser will show a countdown timer. However, it probably won’t look too impressive. We can fix this by adding some CSS to format the text.

Within the <head> tag of the file, add the following:

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <style>
        #countdown {
            font-family: "Roboto", sans-serif;
            font-size: 4rem;
            font-weight: bold;
            color: #FFFFFF;
            margin: auto;
            width: 300px;
            text-align: center;
        }
    </style>
</head>

We’re not doing anything too impressive, but we are downloading a font to use and adjusting the size, color, and position. For your project, you can add more CSS to better fit the theme of your stream.

Adding the Stream Timer to Open Broadcast Studio as a Browser Source

Now that we have a countdown timer, we need to get it into our stream for broadcasting to Twitch, Mixer, or something else. For this example I’ll be using Open Broadcast Studio (OBS), but with a few adjustments, you should be able to apply it towards Wirecast, XSplit, or another popular tool.

Within OBS, choose to add a Browser as a source within your scene.

OBS New Browser Source

The Browser source can add pretty much any HTML file to a scheme, whether that be a remotely hosted website or some local HTML file like the one that we had just created.

Make sure to select the Local File checkbox and then choose the countdown.html file that we had just created.

OBS Stream Timer

If the timer doesn’t show in your scene, or you make changes to the HTML file and want the scene to reflect the changes, you may need to refresh the cache using the dialog where you selected the HTML file.

Conclusion

You just saw how to add a countdown timer to your streams using simple JavaScript and HTML with Open Broadcast Studio (OBS). As of right now, OBS doesn’t provide a timer, so if we want to let viewers know when we’re starting, we need to create something on our own.

If you’re using another streaming software, as long as it can consume HTML, the same code should work.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

The Polyglot Developer

Subscribe

Subscribe to the newsletter for monthly tips and tricks on subjects such as mobile, web, and game development.

The Polyglot Developer

Support This Site