haudio.html

<!--#set var="title" value="Playdar - hAudio Microformat Demo" --><!--#include virtual="../inc/header.html" -->

<h2>hAudio Demo</h2>
<!--#include virtual="demolist.html" -->

<div class="box" id="playdar_stat">Checking for local Playdar service...</div>

<p>
    This demo isn't really about microformats. It uses a super-simple hAudio implementation
    to represent tracks, but you could write a custom parser to find elements on any site
    that represent artist/track names.
</p>
<input type="button" value="Microformats Go!" id="gomicroformats" onclick="go_microformats()" disabled="disabled" />
<ul id="tracks">
    <li>
        <div class="haudio">
           <span class="contributor">Rick Astley</span> -
           <span class="fn">Never Gonna Give You Up</span>
        </div>
    </li>
    <li>
        <div class="haudio">
           <span class="contributor">Weezer</span> -
           <span class="fn">Undone - The Sweater Song</span>
        </div>
    </li>
    <li>
        <div class="haudio">
           <span class="contributor">Metallica</span> -
           <span class="fn">Enter Sandman</span> 
        </div>
    </li>
    <li>
        <div class="haudio">
           <span class="contributor">The Beatles</span> -
           <span class="fn">Yellow Submarine</span>
        </div>
    </li>
    <li>
        <div class="haudio">
           <span class="contributor">Guns N' Roses</span> -
           <span class="fn">Sweet Child O' Mine</span>
        </div>
    </li>
    <li>
        <div class="haudio">
           <span class="contributor">Joe Satriani</span> -
           <span class="fn">Surfing with the Alien</span> 
        </div>
    </li>
    <li>
        <div class="haudio">
           <span class="contributor">Massive Attack</span> - 
           <span class="fn">Angel</span>
        </div>
    </li>
    <li>
        <div class="haudio">
           <span class="contributor">Nightwish</span> -
           <span class="fn">Angels Fall First</span>
        </div>
    </li>
    <li>
        <div class="haudio">
           <span class="contributor">Big Bad Sun</span> -
           <span class="fn">Sweet Melissa</span> 
        </div>
        (this one is a a Magnatune artist)
    </li>
    <li>
        <div class="haudio">
           <span class="contributor">Dream Theatre</span> -
           <span class="fn">Pull Me Udner</span> 
        </div>
        (intentionally misspelled)
    </li>
    <li>
        <div class="haudio">
           <span class="contributor">Dire Straights</span> -
           <span class="fn">01 - sultans of swing</span> 
        </div>
        (intentionally misspelled)
    </li>

</ul>

<script type="text/javascript" src="/static/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript">
// create a custom playdar callback that will handle results for this query:
var results_handler = function (response, finalanswer) {
    if (response.results.length) {
        // generate tooltip with details:
        var tt = "Sources: ";
        for (var k = 0; k < response.results.length; ++k) {
            var r = response.results[k];
            tt += r.source + "/" + r.bitrate + "kbps/" + Playdar.Util.mmss(r.duration) + " ";
        }
        // update status element:
        $(response.qid).className = 'playdar_found';
        
        var sound = Playdar.player.register_stream(response.results[0]);
        $(response.qid).innerHTML = "<a href=\"#\" title=\""+tt+"\" class=\"playbutton\">" + response.results.length + "<span style=\"display: none;\">" + response.results[0].sid + "</span></a>";
    } else if (finalanswer) {
        $(response.qid).className = 'playdar_notfound';
        $(response.qid).innerHTML = ':(';
    }
};

Playdar.setup({
    receiverurl: "http://<!--#echo var="domain" -->/demos/playdarauth.html",
    website: "http://<!--#echo var="domain" -->/demos/",
    name: "Playdar Demos"
});
Playdar.client.register_listeners({
    onStat: function (detected) {
        var text;
        if (detected) {
            text = "<b style='color:green;'>Playdar ready</b>";
        } else {
            text = "<b style='color:red;'>Playdar unavailable</b><br/>You need Playdar, the music content resolver, installed and running. See <a href=\"http://<!--#echo var="domain" -->/\"><!--#echo var="domain" --></a>.";
        }
        $('playdar_stat').update(text);
    },
    onAuth: function () {
        $('gomicroformats').disabled = false;
    },
    onResults: results_handler
});
soundManager.url = '\/static\/soundmanager2_flash9.swf';
soundManager.flashVersion = 9;
soundManager.onload = function () {
    Playdar.setup_player(soundManager);
    Playdar.client.init();
};

function go_microformats() {
    $('tracks').observe('click', function (e) {
        var el = e.element();
        if (el.match('a.playbutton')) {
            e.stop();
            var sid = el.down('span').innerHTML;
            Playdar.player.play_stream(sid);
        }
    });
    
    var mkstatuselem = function (id) {
        var d = document.createElement('span');
        d.id = id;
        d.className = 'playdar_searching';
        d.innerHTML="&nbsp; &nbsp;";
        return d;
    };
    
    var divs = $$('div.haudio');
    for (var i = 0; i < divs.length; ++i) {
        var artist  = divs[i].select('span.contributor')[0].innerHTML.replace(/^\s+|\s+$/g, '');
        var track   = divs[i].select('span.fn')[0].innerHTML.replace(/^\s+|\s+$/g, '');
        var uuid = Playdar.Util.generate_uuid();
        // add a "searching..." status :
        divs[i].appendChild(mkstatuselem(uuid)); 
        Playdar.client.resolve(artist, "", track, uuid);
    }
}
</script>
</body>
</html>