Icecast Now Playing WordPress Widget Script

Before moving to WordPress from BlogEngineDotNet I had a widget that made a call to a specially created Icecast XSL file to display the current playing track title in a Widget.  This worked great, but it was static and wouldn’t update if the track changed.  Migrating to WordPress, I wanted to achieve the same track playing information but up the game with it updating to display new track information.  The latest Icecast server has built in metadata report in JSON format now so I wanted to use this over parsing an XSL file. This took me roughly about a day and a half to complete, mostly due to nearly all examples of parsing JSON with Javascript do not work and I know little Javascript. Here is an overview of the process invovled.

  • Configure Icecast headers and SSL certificates
  • Insert Javascript in headers.php
  • Insert HTML in Widget for display
Configure Icecast

You can skip this part if you are not using SSL. Also note Apache and Icecast are running on the same server. Since my site defaults to SSL (https) I have to configure Icecast for SSL.

The first step is to create the proper SSL certificate file format that Icecast uses. It requires a Public/Private keypair file. I used my Let’s Encrypt certificates and concatenated them together into one file.

cd /usr/share/icecast
cat /etc/letsencrypt/live/autonarcosis.com/cert.pem > icecast.pem
cat /etc/letsencrypt/live/autonarcosis.com/privkey.pem >> icecast.pem
chown icecast.icecast icecast.pem
chmod go-r icecast.pem

Now to edit the /etc/icecast.xml configuration file to enable an SSL port and point to the icecast.pem file. Create a second listen-socket container with a different port and enable SSL. Insert http-headers container before paths container for access control (this gives permission for the javascript to access the JSON data).  Put the ssl-certificate path setting within the existing paths container.

<listen-socket>
     <port>8002</port>
     <ssl>1</ssl>
</listen-socket>

<http-headers>
    <header name="Access-Control-Allow-Origin" value="*" />
</http-headers>
<paths>
     <ssl-certificate>/usr/share/icecast/icecast.pem</ssl-certificate>
</paths

Save the icecast.xml file. Enable the new port in the firewall.

firewall-cmd --permanent --add-port=8002/tcp
firewall-cmd --reload

Restart Icecast, which will now be listening on an SSL port.

systemctl restart icecast.service

You can view Icecast error log file /var/log/icecast/error.log to see if the SSL certificate loaded properly.  You should see something similar to this.

[2016-03-11  15:41:45] INFO connection/get_ssl_certificate SSL certificate found at /usr/share/icecast/icecast.pem
[2016-03-11  15:41:45] INFO connection/get_ssl_certificate SSL using ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA2
56:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-R
SA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SH
A384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA25
6:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:ECDHE-RSA-DES-CBC3-SHA:ECDHE-ECDSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-S
HA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-S
HA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA
Configure WordPress

Now it is time to configure WordPress.  Below is the Javascript that I hacked together to pull the Icecast metadata from the data feed in JSON format. This is WordPress modified Javascript and will not work outside WordPress.  Place this Javascript in the HEAD section of your themes headers.php.

<script type="text/javascript">
function radioTitle() {
 
jQuery.ajax({
        url: "https://www.autonarcosis.com:8002/status-json.xsl",
        //force to handle it as text
        dataType: "text",
        async: true,
        success: function(data) {
                        
        //data downloaded so we call parseJSON function 
        //and pass downloaded data
        var json = jQuery.parseJSON(data);
        //now json variable contains data in json format
        //let's display a few items
        // this is the element we're updating that will hold the track title
            jQuery('#track-title').text(json.icestats.source.title);
        // this is the element we're updating that will hold the listeners count
            jQuery('#listeners').text(json.icestats.source.listeners);            
       }
     });
   };
   
jQuery(document).ready(function(){

        setTimeout(function(){radioTitle();}, 2000);
        // we're going to update our html elements / player every 15 seconds
        setInterval(function(){radioTitle();}, 15000); 

});

</script>

Add the HTML to the widget so the information will be displayed.

<p>
</br>
Listeners: <span id="listeners">00</span></br>
Current track: <span id="track-title">LIVE</span>
</p>

That’s all there is to it. There could possibly be a better way or function to do this.

I used this blog entry as a base for figuring this out; https://linge-ma.ws/update-listeners-track-on-a-website-using-icecast-jsonp-and-jquery/

VLC – ProjectM – How To

Seeing as there is a mountain of click bait, I am writing this post to hopefully help people and answer the questions they have. Because there are no clear answers. To here it goes.

How do I get the menu in VLC ProjectM?

You can’t. Hot Keys Do Not Work.

How do I skip a preset?

You can’t. Hot Keys Do Not Work.

How do I…

Just stop asking questions about ProjectM for VLC. It barely works. You can’t do anything with it other than turn it on and make small changes. It will not work with streams because it doesn’t detect song changes so the default preset will play and never switch. If you want to use Milkdrop Presets, use a different program such as Winamp. If you wish to use VLC as the audio player, my recommendation is to use a separate visualization program and a virtual audio port program. The visualizations in VLC are minimal and most likely will never be implemented as the program wasn’t intended for this type of use.
Update: It appears ProjectM has been removed from the v2.2.X of VLC. So that fixes everything.

Some stand alone visualization programs are VSXu Player and Plane9.

AutoNarcosis Radio! All Gay, All Day!

I’ve added a little widget on the side panel for some streaming audio. I’ve been having fun playing around with LiquidSoap and IceCast2. It seems to work really well. The only problem is, about 99% of the people I tell about it seem competely unable to stream audio. Are people that retarded? Apparently so! The stream is not always on, so if it doesn’t work, most likely I am not listening to music myself.  It’s random as to what I am playing. It could be anything from Dance/Disco to Heavy Metal.  I’ve had this setup before a long time ago using SAM Broadcaster and Windows Media Services and WMA format. Not that anyone ever listened to it much.

LiquidSoap is an Open Source automated DJ media player/streamer. I found it looking for an alternative to SAM Broadcaster because that is just way too much money and kind of an over kill for what I was looking for.  IceCast2 is a media streaming server. I point the output of LiquidSoap to IceCast2 and clients (thats you) connect to IceCast2 server.  I intitally tried to use OGG format, however, most players fail to play OGG streams properly so switched to MP3.

I am running this all off Windows, but it works just as well (if not better) on Linux.

Get Your Boat Of Chicken!

Have I mentioned I love Disco? Disco is a great time in music, especially dance music. A lot of development in the styles of music were generated during this time. A good portion of the current dance music is mostly taken from the Disco era.  There was so much of it made I just love the Internet when I find those classic gems of tunes.  I also enjoy how life is beginning to imitate art. I think I could describe peoples lives thoroughly through previous works of music.

Eleventh Hour – Hollywood Hot
http://www.youtube.com/watch?v=bZ0FZYI3R2s