I took a little time last night to get Kung-Tunes back up and running again — as before, there’s now a ‘Music of the Moment’ box displaying whatever .mp3 I’m listening to, updated every 30 seconds so that it’s always current.
Technical details follow…
The what and the why
There’s a cool little OS X program called Kung-Tunes that ties into iTunes and creates a text file displaying what .mp3 is playing at the moment, and uploads that file to a webserver. That text file can then be included in a webpage, allowing visitors to see what is currently playing on my computer, in real-time.
How I did it
I started by just creating a box in my sidebar to display the track information in, and using a PHP command to insert that text file when someone requests the page:
<div>
<h1>Music of the moment:</h1>
<p></p>
</div>
This worked, but the downside was that it only loaded once — right when the page was called and loaded to the visitors browser. I wanted to have the track info update on a regular basis, but without having to force the entire page to refresh. So, after a little experimenting, I figured I could drop the track info into an iframe tag. So I set the iframe to a width of 150px to fit the size of the box, told it not to display scroll bars, and told it to call the ‘kungtunes.inc’ file. By leaving the PHP ‘include’ command inside the iframe tag, older browsers that don’t display inline frames will still call the music file — it won’t refresh, but it won’t look broken, either.
<div>
<h1>Music of the moment:</h1>
<p></p>
</div>
This almost got me there, but not quite. As the iframe loads whatever URL it’s given as a page on its own, the ‘itunes.txt’ file was being displayed without any formatting — white background, 12-pt Times text, and so on. Easily fixed, however — I just created a small HTML file with an embedded stylesheet that is a subset of the overall stylesheet, put the PHP ‘include’ command in that, and pointed the iframe at that page.
<div>
<h1>Music of the moment:</h1>
<p></p>
</div>
That page has a meta tag that forces it to refresh every 30 seconds — but since it’s embedded within the `iframe“, that small section of the page is the only area that gets refreshed, the rest of my page stays static.
And, with that, we’re good to go! End result: as I listen to music, Kung-Tunes creates a small text file of the currently playing track that it uploads to my webserver. When someone makes a call for the longletter/index.php page, the iframe loads the kungstunes.php file, which in tune pulls in the uploaded .mp3 information from Kung-Tunes. Every 30 seconds the iframe refreshes, ensuring that there’s always a current display of what i’m listening to (as long as i’m listening to something) displayed on my page.
Adding Amazon links
Kung-Tunes’ default code for wrapping the artist and album names in links defaults to a Google search. Since I’m an Amazon Associate, I changed that code so that the links now perform a search on Amazon — and if anyone happens to buy something after clicking through one of the links, I’ll get a (very) small percentage of the sale! Coolies.
If anyone reading this is an Amazon Associate and would like to do the same, copy and paste the following code into your Kung-Tunes ‘Music track format’ box (items you’ll want to changes are bolded):
(NOTE: The two really long Amazon URLs should each be entered as one line, with no spaces or breaks — I just broke them down here for legibility.)
<strong>djwudi</strong> is listening to #p<a href="http://www.amazon.com/exec/
obidos/external-search?tag=[AmazonAssociatesID]&keyword=%22^p%22&
mode=music" title="Search Amazon for ^p"><strong>^p</strong></a>
#p"^t"[^l] #afrom <em><a href="http://www.amazon.com/exec/obidos/external-search?
tag=[AmazonAssociatesID]&keyword=%22^p%22%20%22^a%22&mode=music" title="Search Amazon for ^p ^a">^a</a></em> #a#y(^y)#y. [<a href="http://www.kung-foo.tv/itti.html" title="Last updated by Kung-Tunes on ^d">?</a>]
Caveat: Skins
This may be a caveat for people who currently use A List Apart‘s Java-Script based stylesheet switcher. I was just playing with this last night, thinking of integrating it into my site, and it (obviously enough once I think about it) doesn’t change the stylesheet for the page embedded inside the iframe tag. Visually, this can get pretty jarring.
I tried putting the switcher code into the linked page, but that didn’t work at all — rather than picking up the cookie and using the new style when the option was switched, for some reason (that I’ve yet to figure out) all text within that iframe completely disappeared. Hrmpf. I’ll keep putzing with it, though.
I have no idea how this might work if you’re using Domesticat’s PHP-based skinning tool — I’ve just jumped into the world of PHP, and am still figuring it all out.
Currently, I’ve decided to forget about the stylesheet switcher until I decided if I want to get the PHP version running to test it out — I like keeping Kung-Tunes going more than playing with alternative stylesheets at this point. YMMV, of course!