This is a revised version of the tutorial to update and improve the original code.

Displaying the songs you are listening to in real time, along with detail about them, is a nice addition to your site. Using a combination of plugins can give many options for the display of info. My goal was to not only make a list of the songs I was listening to, but to display an album cover from the song upon hovering.

With this in mind, I started with the concept and Trackback URL format from A Whole Lotta Nothing. The idea is to use Trackback to transfer the info rather than FTP or another method. Because most of my songs on my system have ID3 tags on them, I added some additional info to be pulled in with the Trackback.

I had seen Brad's concept for an advanced Macro that used the Overlib script to change

into an amazon link with a hover. The Trackback URL contains the Current Song title, the Current Album Name, and the Current Artist. This combined with the IfEmpty plugin to determine if the Current Album and Artist info is available will either give text or the code for a hover with the album title and link to purchase it at Amazon.

Finally, some PHP gives a different message if WinAmp is stopped is added and the whole thing is included onto my sidebar. The details of how I've done this are below. Many modifications could be made to this to make it work the way YOU want it to!

---

Required:

• Winamp 2.x or 5.x (I'm using 5.0)
• OddSock's DoSomething plugin (I'm using 2.11 or 2.12)
• Movable Type 2.5 or higher
• Macro plugin
• IfEmpty plugin
• Amazon plugin
  
  • Amazon Developers Token (as required by Amazon plugin)
  • (optional) Amazon Associate account - or you can put loveproductions in the config file :)
• PHP (for inclusion into the index page)
• Overlib javascript (for hovered box)
• id3v1 tags set in your music collection files. This controls the hoverable image and title.
• (optional) an always-on internet connection would make this the most useful.
• (optional) Brenna's Remove Pings plugin can keep things neat in your database, even after a lot of music has been played. The KDLB version is enhanced for this tutorial; use http://blank as the source_url.

---

Directions:

• Create a new blog or select one of your less traveled blogs. This will keep the rebuilds upon trackback down.
  • Create a new category. Entries won't be posted in the category, but trackback pings will come into it. I named mine Incoming, because that's a term I use through my sites when data is pulled into a template.
  • Edit the category attributes. Turn on Accept Incoming TrackBack pings.
  • Click Save, and more info will appear below.
  • Note the TrackBack URL for this category:
    
    http://your-site.com/mt/mt-tb.cgi/3779
    
    This will be what you use in the next steps.
  • Open Winamp, and use the menu to select Options > Preference and then go to Plugins and click on the General Purpose option.
    • Select the DoSomething plugin and click Configure. If DoSomething is not in the list, it means you probably haven't installed it into the correct directory. Double check the DoSomething documentation.
    • I have the following check boxes checked:
      
      • Enable Error Messages
      • Show Status Window
    • Now we are gonna create a new action.
      
      • From the Action drop down box, select "Submit A URL"
      • In the URL box, you'll put something like this (all on one line - breaks are only added for wrapping):
        
        http://your-site.com/mt/mt-tb.cgi?tb_id=3779
        &excerpt=%%URL_CURRENTSONG%%&url=blank
        &blog_name=%%URL_CURRENTALBUM%%
        %20%2D%20%%URL_CURRENTARTIST%%
        
        The italicized portion should be filed in with your Trackback URL you noted from before.
      • The URL Result File box can stay empty.
      • Click "Add -->" button on the right side.
      • Fill in a directory loction in the Temp Dir box. I use my music folder on my computer just to keep things all in one place.
      • Click the "OK" button.
      
      click to view the config screen
  • Now Winamp and DoSomething are set to send the info to MT. We'll set up a template to display the info.
    
    • Create a New Index Template named Incoming with an output file of incoming.php.
    • Paste the below code into the template:
      <$MTInclude module="regex"$> <MTMacroApply> <MTPings category="incoming" lastn="8"> <? if ("<$MTPingTitle$>" == "Broadcast Stopped") { echo "<em>WinAmp is off!</em>"; } else { ?> <MTIfNotEmpty var="PingBlogName"> <music keyword="<$MTPingBlogName$>"><$MTPingExcerpt convert_breaks="0"$></music> <? $asin = "<MTAmazon search="[MTPingBlogName encode_js='1']" method="Keyword" line="music" lastn="1"><$MTAmazonASIN$></MTAmazon>"; ?> </MTIfNotEmpty> <? if (empty($asin)) { ?> <$MTPingExcerpt convert_breaks="0"$> <? } } ?> <br /> </MTPings> </MTMacroApply> <em>updated <$MTDate format="%m/%d/%y %X"$></em>
    • I created a new Module named regex to store the amazon definition. Paste the following into it:
      <MTMacroDefine name="music" ctag="music"><MTIfNotEmpty expr="[MTMacroAttr name='keyword']"><MTAmazon search="[MTMacroAttr name='keyword']" method="Keyword" line="music" lastn="1"><a href="<MTAmazonLink>" title="Buy now at amazon.com - only <MTAmazonSalePrice>!" onmouseover="return overlib(ImgSrc+'<MTAmazonSmallImage>'+AltEnd+'<MTAmazonReleaseDate format="%b %Y">'+EndPrice+'<MTAmazonSalePrice>'+PurchLink+'<MTAmazonLink>'+PurchEnd, STICKY, TIMEOUT, 2000, CAPTION, '<MTAmazonTitle encode_js="1"> by <MTAmazonArtist encode_js="1">');" onmouseout="return nd();"><MTMacroContent default="[MTAmazonTitle]"></a></MTAmazon></MTIfNotEmpty></MTMacroDefine>
• I use PHP to include this file into my Main Index template on my main blog. This will keep the list current without having to rebuild your index page itself.
  An example of a PHP include statement is as follows:
  
  <?
  include("/home/USER/public_html/BLOG/incoming.php");
  ?>
• You'll also want to follow the Overlib instructions to put the script into your Main Index template on your main blog.
  this would include uploading the .js file and adding two lines of code to your template - the first in the <head> container, and the second inside the <body> :
  
  <script language="JavaScript" src="<$MTBlogURL$>/overlib.js"></script> <script type="text/javascript">
  <!--
  var ImgSrc = "<img src='";
  var AltEnd = "' align='left' border='0' hspace='5' /><br />Released: <b>";
  var EndPrice = "</b><br />Amazon Price: <b>";
  var PurchLink = "</b><br /><a href='";
  var PurchEnd = "'>Purchase</a>";
  // -->
  </script>
  
  
  <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;">&nbsp;</div>

That should do it! You now have a fully functioning playlist that connects your music player to your website.