WIDGETS v7 CLIENTS CAN DOWNLOAD THIS SCRIPT FROM SERVICE PAGE -- includes pre loader GIF and other special downloads -- click on Widgets v7 service and look for the downloads link on the left. Download is not available to free trial customers sorry.
How to embed track, listener amount or other Shoutcast/Icecast Data on my Website
Independent widgets like the current track, listener count or last played tracks can be placed on your website with a little Javascript, AJAX and PHP. We have a working sample up at https://shoutcastwidgets.com/ajaxdemo
- Javascript runs in the browser
- PHP runs on the server
- AJAX lets Javascript work with PHP.
For this tutorial, we will assume you have some type of website editor, code editor or a good free piece of software we recommend is NotePad++. you may also be able accomplish this with most online website builders as well. Once you've connected to your website and are able to create/edit pages, you're ready to get started!
You will need a Shoutcast (or Icecast) XML page which comes standard with most all Shoutcast/Icecast servers.
For this tutorial we will be using this demo Shoutcast DNAS https://shoutcastwidgets.com/DNAS/demo
If we add ?page=7 to the end, we can get the XML feed (this works with standard Shoutcast server dnas as well)
https://shoutcastwidgets.com/DNAS/demo?page=7
page=7 gives us a lot of data. The demo DNAS includes the popular Fake Listener Bot plugin and each is listed on that page along with the current track, last played, stream data and a lot more.
Next we're going to show you how to grab each individual data point and put them on your website!
If you're a Shoutcast Widgets v7 client, you can grab your feed URL from the main Widgets v7 dashboard. Look for the DNAS widget. In the dropdown menu find the option All Statistics (XML)
We recommend starting out with a test. Create a folder titled ajaxdemo and 2 files in that new directory index.php and ajax.php.
Open the file index.php file open in your text editor, copy/paste the below code into the index.php file and save. (note! You will need to change line #5 & #7 to work with your Url - replace https://shoutcastwidgets.com/ajaxdemo/ with your website and directory)
<div id="track"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#track").load('https://shoutcastwidgets.com/ajaxdemo/ajax.php');
var refreshId = setInterval(function() {
$("#track").load('https://shoutcastwidgets.com/ajaxdemo/ajax.php?randval='+ Math.random());
}, 60000);
});
</script>
Now open ajax.php, copy/paste the below code and save.
<?php header('Access-Control-Allow-Origin: *');
$data = 'https://shoutcastwidgets.com/DNAS/demo?page=7';
@file_get_contents($data);
$xml = @simplexml_load_file($data);
echo $xml->SONGTITLE;
- To make this work with your stream, replace line #2 of the ajax.php file to your own
- You can change the length of time between reloads on line #8 of the index.php file. 60000 ms = 60 seconds.
- You can use this method to get anything on the XML data page. For example, to display the current listeners change line #5 in the ajax.php file from echo $xml->SONGTITLE; to echo $xml->CURRENTLISTENERS; or to echo $xml->BITRATE; if you want to display the bitrate
Test your coding by visiting the url path you used. For example, if you use the folder /ajaxdemo and your website is yoursite.com you would visit https://yoursite.com/ajaxdemo
