Sunday, June 1, 2003
Winamp Hoverable Playlist
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
<amazon keyword="album title">
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 (I'm using 2.9)
- 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 leave loveproductions in the code :)
- PHP (for display neatness and inclusion into the index page)
- Overlib javascript (for hovered box)
- (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.
Example from kadyellebee.com
When you hover the title of the song, the overlib popup displays, giving the album picture and a purchase link.
When you hover the title of the song, the overlib popup displays, giving the album picture and a purchase link.
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=%%CURRENTSONG%%&url=blank&
blog_name=%%URL_CURRENTALBUM%%
%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"> <div style="font-size:11px; padding:2px;line-height:9px;font-family:tahoma, sans-serif;"> <? if ("<$MTPingTitle$>" == "Broadcast Stopped") { echo "<em>WinAmp is off right now!</em><br />"; } else { ?> <MTIfEmpty var="PingBlogName"> <$MTPingExcerpt convert_breaks="0"$> </MTIfEmpty> <MTIfNotEmpty var="PingBlogName"> <amazon keyword="<MTPingBlogName>"><$MTPingExcerpt convert_breaks="0"$></amazon> </MTIfNotEmpty> <? } ?> </div> </MTPings> </MTMacroApply> <span style="font-size:9px;font-style:italic;">updated <$MTDate format="%m/%d/%y %X"$></span><br /> - I created a new Module named regex to store the amazon definition.
Paste the following into it:
<MTMacroDefine name="amazon" ctag="amazon"><MTIfNotEmpty expr="[MTMacroAttr name='keyword']"><MTAmazon associateid="loveproductions" search="[MTMacroAttr name='keyword']" method="Keyword" line="music" lastn="1"><a href="<MTAmazonLink>" title="Buy now at amazon.com - only <MTAmazonSalePrice>!" onmouseover="return overlib('<img src=\'<MTAmazonSmallImage>\' align=\'left\' border=\'0\' hspace=\'5\' /><br />Released: <b><MTAmazonReleaseDate format="%b %Y"></b><br />Amazon Price: <b><MTAmazonSalePrice></b><br /><a href=\'<MTAmazonLink>\'>Purchase</a>', STICKY, TIMEOUT, 2000, CAPTION, '<MTAmazonTitle> by <MTAmazonArtist>');" onmouseout="return nd();"><MTMacroContent default="[MTAmazonTitle]"></a></MTAmazon></MTIfNotEmpty></MTMacroDefine>
An example of a PHP include statement is as follows:
<?
include("/home/USER/public_html/BLOG/incoming.php");
?>
include("/home/USER/public_html/BLOG/incoming.php");
?>
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="http://your-site.com/overlib.js"></script>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"> </div>
Update! June 7, 2003
For websites with a goal of having XHTML valid code, the regex module from above can be replaced with this:
<MTMacroDefine name="amazon" ctag="amazon"><MTIfNotEmpty expr="[MTMacroAttr name='keyword']"><MTAmazon associateid="loveproductions" 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> by <MTAmazonArtist>');" onmouseout="return nd();"><MTMacroContent default="[MTAmazonTitle]"></a></MTAmazon></MTIfNotEmpty></MTMacroDefine>And then in the head of your document where you insert the javascript for overlib, paste this:
<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>This will put all of the < and > tags into the variables in the head rather than in the body of the page where it may not validate.
Update! August 9, 2003I updated a few syntax errors - the incoming template was missing a question mark to close the PHP script, and I took out some spaces in the updated javascript var statements; I'm not sure if it matters, but I cleaned it up in case. :)