{"id":670,"date":"2002-09-09T11:18:58","date_gmt":"2002-09-09T19:18:58","guid":{"rendered":"http:\/\/michaelhans.com\/eclecticism\/2002\/09\/09\/kung-tunes-is-back\/"},"modified":"2019-11-27T13:44:12","modified_gmt":"2019-11-27T21:44:12","slug":"kung-tunes-is-back","status":"publish","type":"post","link":"https:\/\/michaelhans.com\/eclecticism\/2002\/09\/09\/kung-tunes-is-back\/","title":{"rendered":"Kung-tunes is back!"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:15816,&quot;href&quot;:&quot;http:\\\/\\\/www.kung-foo.tv\\\/itti.html&quot;,&quot;archived_href&quot;:&quot;&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:15898,&quot;href&quot;:&quot;http:\\\/\\\/www.w3.org\\\/TR\\\/html401\\\/present\\\/frames.html#h-16.5&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260311085005\\\/https:\\\/\\\/www.w3.org\\\/TR\\\/html401\\\/present\\\/frames.html&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-14 01:02:34&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-18 06:39:21&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-18 06:39:21&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:13963,&quot;href&quot;:&quot;http:\\\/\\\/associates.amazon.com&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20160430094748\\\/https:\\\/\\\/associates.amazon.com\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-12 16:29:29&quot;,&quot;http_code&quot;:400},{&quot;date&quot;:&quot;2026-04-06 00:55:29&quot;,&quot;http_code&quot;:400},{&quot;date&quot;:&quot;2026-04-14 05:37:24&quot;,&quot;http_code&quot;:400}],&quot;broken&quot;:true,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-14 05:37:24&quot;,&quot;http_code&quot;:400},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:15899,&quot;href&quot;:&quot;http:\\\/\\\/alistapart.com&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260311081900\\\/https:\\\/\\\/alistapart.com\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-14 01:02:36&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-03-14 01:02:36&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:15900,&quot;href&quot;:&quot;http:\\\/\\\/alistapart.com\\\/stories\\\/alternate&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20100106085518\\\/http:\\\/\\\/www.alistapart.com\\\/stories\\\/alternate\\\/&quot;,&quot;redirect_href&quot;:&quot;https:\\\/\\\/alistapart.com\\\/stories\\\/alternate&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:15901,&quot;href&quot;:&quot;http:\\\/\\\/www.domesticat.net\\\/skins\\\/howto.php&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20070703030603\\\/http:\\\/\\\/www.domesticat.net\\\/skins\\\/howto.php&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-14 01:02:49&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-03-14 01:02:49&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>I took a little time last night to get Kung-Tunes back up and running again &#8212; as before, there&#8217;s now a &#8216;Music of the Moment&#8217; box displaying whatever .mp3 I&#8217;m listening to, updated every 30 seconds so that it&#8217;s always current.<\/p>\n<p>Technical details follow&#8230;<\/p>\n<p><!--more--><\/p>\n<h2>The what and the why<\/h2>\n<p>There&#8217;s a cool little OS X program called <a href=\"http:\/\/www.kung-foo.tv\/itti.html\" title=\"Kung-Tunes\">Kung-Tunes<\/a> 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.<\/p>\n<h2>How I did it<\/h2>\n<p>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:<\/p>\n<pre><code>&lt;div&gt;\n &lt;h1&gt;Music of the moment:&lt;\/h1&gt;\n &lt;p&gt;&lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>This worked, but the downside was that it only loaded once &#8212; 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 <a href=\"http:\/\/www.w3.org\/TR\/html401\/present\/frames.html#h-16.5\" title=\"W3C HTML 4.01 spec: IFRAME (Inline Frame)\"><code>iframe<\/code><\/a> tag. So I set the <code>iframe<\/code> 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 &#8216;kungtunes.inc&#8217; file. By leaving the PHP &#8216;include&#8217; command inside the <code>iframe<\/code> tag, older browsers that don&#8217;t display inline frames will still call the music file &#8212; it won&#8217;t refresh, but it won&#8217;t look broken, either.<\/p>\n<pre><code>&lt;div&gt;\n &lt;h1&gt;Music of the moment:&lt;\/h1&gt;\n\n  &lt;p&gt;&lt;\/p&gt;\n\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>This almost got me there, but not quite. As the <code>iframe<\/code> loads whatever URL it&#8217;s given as a page on its own, the &#8216;itunes.txt&#8217; file was being displayed without any formatting &#8212; white background, 12-pt Times text, and so on. Easily fixed, however &#8212; I just created a small HTML file with an embedded stylesheet that is a subset of the overall stylesheet, put the PHP &#8216;include&#8217; command in that, and pointed the <code>iframe<\/code> at that page.<\/p>\n<pre><code>&lt;div&gt;\n &lt;h1&gt;Music of the moment:&lt;\/h1&gt;\n\n  &lt;p&gt;&lt;\/p&gt;\n\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>That page has a <code>meta<\/code> tag that forces it to refresh every 30 seconds &#8212; but since it&#8217;s embedded within the `iframe&#8220;, that small section of the page is the only area that gets refreshed, the rest of my page stays static.<\/p>\n<p>And, with that, we&#8217;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 <code>longletter\/index.php<\/code> page, the <code>iframe<\/code> loads the <code>kungstunes.php<\/code> file, which in tune pulls in the uploaded .mp3 information from Kung-Tunes. Every 30 seconds the <code>iframe<\/code> refreshes, ensuring that there&#8217;s always a current display of what i&#8217;m listening to (as long as i&#8217;m listening to something) displayed on my page.<\/p>\n<h2>Adding Amazon links<\/h2>\n<p>Kung-Tunes&#8217; default code for wrapping the artist and album names in links defaults to a Google search. Since I&#8217;m an <a href=\"http:\/\/associates.amazon.com\/\" title=\"Amazon Associates program\">Amazon Associate<\/a>, I changed that code so that the links now perform a search on Amazon &#8212; and if anyone happens to buy something after clicking through one of the links, I&#8217;ll get a (very) small percentage of the sale! Coolies.<\/p>\n<p>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 &#8216;Music track format&#8217; box (items you&#8217;ll want to changes are bolded):<\/p>\n<p>(<strong>NOTE:<\/strong> The two really long Amazon URLs should each be entered as <em>one<\/em> line, with <em>no spaces or breaks<\/em> &#8212; I just broke them down here for legibility.)<\/p>\n<pre><code>&lt;strong&gt;djwudi&lt;\/strong&gt; is listening to #p&lt;a href=\"http:\/\/www.amazon.com\/exec\/\nobidos\/external-search?tag=[AmazonAssociatesID]&amp;amp;keyword=%22^p%22&amp;amp;\nmode=music\" title=\"Search Amazon for ^p\"&gt;&lt;strong&gt;^p&lt;\/strong&gt;&lt;\/a&gt;\n#p\"^t\"[^l] #afrom &lt;em&gt;&lt;a href=\"http:\/\/www.amazon.com\/exec\/obidos\/external-search?\ntag=[AmazonAssociatesID]&amp;amp;keyword=%22^p%22%20%22^a%22&amp;amp;mode=music\" title=\"Search Amazon for ^p ^a\"&gt;^a&lt;\/a&gt;&lt;\/em&gt; #a#y(^y)#y. [&lt;a href=\"http:\/\/www.kung-foo.tv\/itti.html\" title=\"Last updated by Kung-Tunes on ^d\"&gt;?&lt;\/a&gt;]\n<\/code><\/pre>\n<h2>Caveat: Skins<\/h2>\n<p>This may be a caveat for people who currently use <a href=\"http:\/\/alistapart.com\/\" title=\"A List Apart\">A List Apart<\/a>&#8216;s Java-Script based <a href=\"http:\/\/alistapart.com\/stories\/alternate\/\" title=\"ALA: Alternative Style\">stylesheet switcher<\/a>. 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&#8217;t change the stylesheet for the page embedded inside the <code>iframe<\/code> tag. Visually, this can get pretty jarring.<\/p>\n<p>I tried putting the switcher code into the linked page, but that didn&#8217;t work at all &#8212; rather than picking up the cookie and using the new style when the option was switched, for some reason (that I&#8217;ve yet to figure out) all text within that <code>iframe<\/code> completely disappeared. Hrmpf. I&#8217;ll keep putzing with it, though.<\/p>\n<p>I have no idea how this might work if you&#8217;re using <a href=\"http:\/\/www.domesticat.net\/skins\/howto.php\" title=\"Domesticat: Skinning a website\">Domesticat&#8217;s PHP-based skinning tool<\/a> &#8212; I&#8217;ve just jumped into the world of PHP, and am still figuring it all out.<\/p>\n<p>Currently, I&#8217;ve decided to forget about the stylesheet switcher until I decided if I want to get the PHP version running to test it out &#8212; I like keeping Kung-Tunes going more than playing with alternative stylesheets at this point. YMMV, of course!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I took a little time last night to get Kung-Tunes back up and running again &#8212; as before, there&#8217;s now a &#8216;Music of the Moment&#8217; box displaying whatever .mp3 I&#8217;m listening to, updated every 30 seconds so that it&#8217;s always current.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2046,2040],"tags":[80,65,25],"class_list":["post-670","post","type-post","status-publish","format-standard","hentry","category-audio","category-blog","tag-music","tag-technology","tag-website"],"_links":{"self":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts\/670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/comments?post=670"}],"version-history":[{"count":0,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts\/670\/revisions"}],"wp:attachment":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/media?parent=670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/categories?post=670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/tags?post=670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}