<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>