Tutorial - Add Winamp's current playing song to your Website!

In this tutorial, I’ll be showing how to use AMIP (Now Playing) Tool + AMIP Configurator, and Dropbox with some html/CSS and jquery plugins, for showing or embedding the current playing track of your Windows System’s media player, on your website/blog.

AMIP stands for Advanced mIRC Integration Plug-in. The title doesn’t reflect actual functionality. Ie, It's not only for mIRC, but can be used for various different ways...

Currently, media players supported by AMIP are:

Winamp, foobar2000, iTunes, Quintessential Media Player

+ Winamp API compatible players: Apollo, MediaMonkey, AIMP Classic

In my tutorial, I'll be using AMIP + Configurator, WINAMP 5, dropbox, and notepad for displaying the current playing song on an html page.

 Tools required:

 JS Plugins required:


*  Step 1:

Download and install AMIP & Configurator.

Open the Configurator as ADMIN (with admin rights).

Click on Callbacks/Web Tab (under Other Integrations)

Now add the following code or similar code, according to your requirement/setup.

/template:(C:\Users\Mohit\Dropbox\Public\Stuff\Music\Now.Playing.Winamp\in.html) C:\Users\Mohit\Dropbox\Public\Stuff\Music\Now.Playing.Winamp\out.html

nowplaying_step1 nowplaying_step2

 

Explanation: /template(*): This code takes a file as input, and generates an output file to the specified file location.

You can give any location or extension to the input/output files, but I've selected dropbox's public folder for this, to make it easier for the html javascript in loading the file from an open-to-public source. Also, the info needs to be changed after every track change, so updating of the out.html needs to be done via dropbox (20gb/month usage for free users).

Now close the configurator, and proceed to Step 2.


 * STEP 2:

Open up your dropbox's public folder, similar to this location:

C:\Users\Mohit\Dropbox\Public\Stuff\Music\Now.Playing.Winamp\

(I've got lots of files in my public folder, hence I've got a different tree structure for keeping my online/public files. You could also keep the in/out files in Dropbox/public root folder, but make sure the path matches the path specified in configurator on Step 1.)

Now create an html file in this folder. Name this file as : in.html

Now open up this in.html file in notepad and copy/paste the following code:

<!-- 'view this in an html beautifier app like Notepad++, or simply copy/paste this on this page: http://ctrlq.org/beautifier/ '-->
	<script type="text/javascript" charset="utf-8"> //function to show time elasped since last track played/changed.
	$(function() {
		var now = new Date(); //"now"
		var play_Time = new Date("%ystamp/%monstamp/%dstamp %hstamp:%mstamp:%sstamp"); // Date/Time formatting with %stamps as per AMIP functions and variables. (more info on their website)
		var diff = Math.abs(now-play_Time); //difference between the current time and the time the song was changed or started playing.
		var diff_minutes = Math.round(diff / (1000*60)); //difference in minutes.
		//line below puts the calculated (time ago) time to strong and replaces the contents of any div with div#id "now_playing_txt" to "Minues ago" or sec/hrs/etc ago"
		$("#now_playing_txt").text(new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes() - diff_minutes).toString());

        $("span.rel_").toRelativeTime(); //here the jquery plugin toRelativeTime is called to change the div#id mentioned above with a relative time. For example, if 65 seconds have passed away, then this plugin will convert that into 1 minute, 5 seconds or something similar.
      });
      //-->
    </script>
	</div>

	<script> //function to show whether shuffle is enabled or disabled.
	$(function() {
		var on_off = "%shuffle"; //variable for status of shuffle (returns "on or off") after then input file has been processed by the AMIP plugin.
		if( on_off == "on") 
		$("#shuffle_s").text("Enabled");
		else 
		$("#shuffle_s").text("Disabled");
		});
	</script>

  <blockquote><span id="a"> <!-- 'Here's span A is shown as default (as per index.html css) displaying only basic song info: Artist - Title.'  -->
    <!-- 'song name, note that you can use AMIP functions in templates (func_lc - lowercases the string) '-->
    <font size=+1><b>%name</font></b><br></span> <!-- in index.html css, I've edited content to be shown on either default or on mouse over. #id A is default. -->
    <!-- album and other song information -->
    <span id="h"> <!-- Ths #id H is shown on mouse over : hover. -->

	Album: <b>%4</b><br />
	Genre: <b>%7</b><br />
	Length: <b>%min:%sec</b> | <font size=-2>Shuffle: <span id="shuffle_s">Enabled / Disabled</span> |</font></span>
  </blockquote> <!-- 'index.html is the final html that you'll be uploading to your website. That file will GET this html file via jquery, and put all this data inside the div with #id : nowPlayingInfo' -->
  
 

 

More variables and functions for the in.html file are defined here: http://amip.tools-for.net/wiki/manual/amip

This in.html file would now contain all the AMIP and HTML input code which will be first processed by the AMIP plugin for winamp, and then by loaded into your index.html page as described in further steps.

The script above contains annonations which can be removed. These annonations explain what each code line is used for, so that you may change the code as per your will and purpose for your final index.html

Annonations are marked by // or <!-  ->

Now we move onto Step 3.


STEP 3:

Now we start with coding the index.html page.

Firstly copy these three files to your /js/ folder:

Open in Notepad: your "index.html" file that you want to publish on the web. It can be index.html or any other file you need to publish with info about your current playing track.

Add the following lines in the <head> </head>  tags.

<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/date.extensions.js"></script>
<script type="text/javascript" charset="utf-8" src="js/to_relative_time.jquery.js"></script>

<script>
$(function(){
   $.get("https://dl.dropboxusercontent.com/u/27854284/Stuff/Music/Now.Playing.Winamp/out.html", function(data) {
      $("#nowPlayingInfo").html(data);
   });
});
</script>

 

Three javascripts are added in the code above, and a javascript function script is then added to get the out.html file from the dropbox/public folder.

To get the public link for your out.html file in dropbox: Go to dropbox folder in your windows system, select the file (out.html) and right click > copy public link.

Note: This out.html file has been configured to be generated by the AMIP on track change of winamp (STEP 1)

Now to Step 4, where further addition of code is required for the index.html


STEP 4:

Firstly, add this code in your document's <HEAD> tags..:

<style>
.box { width: 400px; height: 120px }
.box span#a {
        display:inline;
    }
    .box:hover span#a {
        display:none;
    }
    .box span#h {
        display:none;
    }
    .box:hover span#h {
        display:inline;
    }
</style>

 

Now, copy paste the following code into your <BODY> tag of your document:

 

<div>

<p><span style="font-size:200%;">Now Playing</span><span style="color:#fff;font-size:80%;background-color:rgba(49,49,49,0.5);">Winamp Update: <span id="now_playing_txt">0 minutes ago!</span></span></p>

<p><span id="nowPlayingInfo">Artist - Song Title</span></p>

</div>

 

The code above almost completes the tutorial, explanation of this step below:

First we add css for Div : box in our document's head tags.

Then, we group different parts of our songs info into different ways:

Dynamic text values being changed are:

Both the classes/ids have been defined in the in.html which will is resulted into out.html with exact content, but original values as per the AMIP code parser.

That's it! Now you have an embedded display for your winamp's currently playing song!

download_source