<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>          
        <script>
            function playSelected(id){
                $("audio").attr("src","play?id="+id);
                $("audio").get(0).play();
            }
            function search(term){
                $.ajax({url:'/search?id='+term,
                        dataType: 'json',
                        success: function(data){
                            alert("SUCCESS");
                            for(var i=0; i<data.length;i++){
                                var title = data[i]["title"];
                                var group = data[i]["group"];
                                var id = data[i]["id"];
                                $("#searchresults").append("<li onClick='playSelected(\""+id+"\")'>"+title+" - "+group+" ["+id+"]</li>");
                            }
                        }
                });
            };
        </script>
    </head>
<body>
<div>
Go5ears. Because Flash simply sucks!
</div>
<div>
<audio src="play?id=a78950d" controls="controls"></audio>
<ul>
<li onClick='playSelected("fe7e4f9")'>Libertine</li>
<li onClick='playSelected("4b9ed95")'>We are the champions</li>
</ul>
</div>
<div>
<form method="POST" onsubmit="search(this.goearsearch.value); return false">
  Search GoEar: <input type="search" name="goearsearch">
</form>
<ul id="searchresults">

</ul>
</div>
</body>
</html>