View Single Post
Old 7th March 2015, 12:08   #3
dopelabs
Major Dude
 
dopelabs's Avatar
 
Join Date: Oct 2006
Location: Silicon Valley
Posts: 530
Send a message via AIM to dopelabs
jquery shoutcast status

https://github.com/Wavestreaming/jqu...iki/Easy-Setup

this will display shoutcast dnas v2 status/info, auto updating every 5 seconds without page reload.

Prerequisites

Your DNAS version must have JSON support, if it does not then you will not be able to use this plugin.

Setup

Download the plugin and store jquery.shoutcast.easy.min.js somewhere on your server.

https://github.com/Wavestreaming/jquery-shoutcast.git

Configuration

In the second script tag you need to edit example.com to be your host and also edit the port if necessary, this is the minimum configration that is required by the plugin, there are more options which can be found here

Usage

Once you have configured the plugin you will need to add various elements to your page.

Showing Stats

To show any statistics from your stream you simply need to add an element with adata-shoutcast-value=”” attribute, for example, if I wanted to show the currently playing song this is what you would have:

code:
<p data-shoutcast-value="songtitle"></p>


Or current listeners:

code:
<span data-shoutcast-value="currentlisteners"></span>


All of the available values can be found here

Showing played tracks

To show played tracks you need to an an ul element with an id of played to your page:

code:
<ul id="played"></ul>


With the above element on the page the names of the recently played tracks will be displayed in order.

Example HTML
code:

<body>
<h1 data-shoutcast-value="servertitle"></h1>

<p>Now Playing: <span data-shoutcast-value="songtitle"></span></p>
<p>Listeners: <span data-shoutcast-value="currentlisteners"></span>/<span data-shoutcast-value="maxlisteners"></span></p>

<h2>You just missed</h2>
<ul id="played"></ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.shoutcast.easy.min.js?host=example.com&port=8000&interval=5000"></script>
</body>


The above HTML will display the server title, the current song, the current listeners, the maximum listeners and a list of all of the recently played tracks.
dopelabs is offline   Reply With Quote