Song Progress bar for OBS Studio or other Visual Streams

Matix · July 12, 2020, 11:20:53 PM

So I made a little PHP Script to display the progress of the current song playing in the web browser. Its a progress bar.

For this script to work, you need either XAMPP or a PHP installation.

If you have XAMPP, copy the following script in the htdocs folder and change the $myFile variable to the location of your now playing info file.

If have PHP, copy the script just to your RadioDJ installation folder and change the $myFile variable to the name of your now playing info file.

To use the script, create the according location and name it "LiveProgress.php".
Now copy the following text into the file

Code Select


<?php

/*
    SETUP COMMAND IN CONSOLE:
    $ php -S localhost:8000 .\LiveProgress.php

*/

$url = $_SERVER["REQUEST_URI"];

if ($url === "/getprogress") {
    $myFile = "NowPlaying.txt";
    $lines = file($myFile); //file in to an array

    $duration = intval(preg_replace("/[^0-9]/", "", $lines[6]));
    $updateID = $lines[7];


    header("Content-Type: application/json");
    print(json_encode(["duration" => $duration, "updateID" => $updateID]));
} else {
?>

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>OBS/RadioDJ Live Song Progress</title>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <link rel="shortcut icon" href="https://img.icons8.com/fluent/48/000000/radio.png" type="image/x-icon">
        <style>
            body {
                background: transparent;
                margin: 0;
            }

            .meter {
                height: 20px;
                /* Can be anything */
                position: relative;
            }

            .meter>span {
                display: block;
                height: 100%;

                background-color: rgba(0, 0, 0, 0.6);
                position: relative;
                overflow: hidden;
            }
        </style>
    </head>

    <body>

        <div class="meter">
            <span style="width: 0;" id="progress"></span>
        </div>

        <script>
            function Sleep(milliseconds) {
                return new Promise(resolve => setTimeout(resolve, milliseconds));
            }

            var lastUID = "";

            function updatePercentage() {
                var startTime, endTime;

                startTime = performance.now();

                $.ajax({
                    url: "/getprogress"
                }).done(async function(data) {
                    if (data.constructor == ({}).constructor)
                        if (lastUID !== data.updateID) {
                            lastUID = data.updateID;


                            var percentage = (data.progress / data.max * 100) + "%";
                            console.log("Duration: " + data.duration + ", UpdateID:" + data.updateID);


                            var sel = $("#progress");
                            sel.stop();
                            sel.css("width", "0")
                                .animate({
                                    width: "100%" // or + "%" if fluid
                                }, data.duration, "linear");




                        }

                    endTime = performance.now();
                    var timeDiff = endTime - startTime; //in ms

                    if (timeDiff > 1000) {
                        updatePercentage();
                    } else {
                        await Sleep(1000 - timeDiff);
                        updatePercentage();
                    }

                });
            }

            updatePercentage();
        </script>

    </body>

    </html>

<?php
}

After you copied the script and changed the $myFile variable, you now have to configure your now playing file.
In line 25 and 26 you can see the use of the variable $lines. In the brackets after the variable you can see a number. This is the line number of the according value in the now playing info file.
In line 25 change the number to the line where your $durationinMilliseconds$ field is. But be careful, in programming the indexes are all by one off, so for example, instead of line 7, you write line 6.
In line 26 you change the number to the line where you have your time infos. In order to work properly, the line in the template file has to look like this

Code Select


$now-hour$-$now-minute$-$now-second$-$now-day$-$now-month$-$now-year$

To start the script using PHP (not XAMPP) past the following command in the command line, after you have navigated to your XAMPP installation folder

Code Select


php -S localhost:8000 .\LiveProgress.php

Now you are ready to go!

You can now access the site by going to localhost:8000!

If you want to add the progress bar on windows/Mac you can use the OBS Browser source plugin.
https://obsproject.com/forum/resources/browser-plugin.115/

If you know CSS (the language used to style on the internet) you can try and change the look and feel of the progress bar.

Feel free to leave a comment with possible improvements and tips.

Thanks,
Matix

P.S.: If you want to see it in action, you can look at my livestream (If online

)
https://youtu.be/txkSMeiakfE

RadioDJ - Free Radio Automation Software Forum

Song Progress bar for OBS Studio or other Visual Streams

Matix