codeincontext/gist:1189597

## gistfile1.html
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    // file://localhost/Users/skattyadz/code/audio/index.htm?boo1=157217&boo2=3113

      $(document).ready(function(){
        var audio1 = document.createElement('audio');
        var audio2 = document.createElement('audio');
        audio1.volume=0.5;
        audio2.volume=1;

        var url2 = 'http://api.audioboo.fm/audio_clips/featured.jsonp?callback=?';
        var url1 = 'http://api.audioboo.fm/tag/music/audio_clips.jsonp?callback=?';

        $.getJSON(url2,function(json){
          $.each(json.body.audio_clips, function(i,boo){
             var item = $("#list2").append("<li><a class='title' href="+boo.urls['high_mp3']+">"+boo.title+"</a> [<a href='"+boo.urls['detail']+"'>link</a>]</li>")
          });
        });

        $.getJSON(url1,function(json){
          $.each(json.body.audio_clips, function(i,boo){
             $("#list1").append("<li><a class='title' href="+boo.urls['high_mp3']+">"+boo.title+"</a> [<a href='"+boo.urls['detail']+"'>link</a>]</li>")
          });
        });

        $.urlParam = function(name){
        	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
        	return (results && results[1]) || 0;
        }

        if ($.urlParam('boo1')) {
          setTrack(1, 'http://boo.fm/b'+$.urlParam('boo1')+'.mp3');
        }
        if ($.urlParam('boo2')) {
          setTrack(2, 'http://boo.fm/b'+$.urlParam('boo2')+'.mp3');
        }

        function setTrack(track, path, title){
          $(".track"+track).html(title);
          $(".track"+track).attr('href', path);
          if (track==1) {
            audio1.pause();
            audio1.setAttribute('src', $(".track1").attr("href"));
            audio1.load();
            audio1.play();
          } else {
            audio2.pause();
            audio2.setAttribute('src', $(".track2").attr("href"));
            audio2.load();
            audio2.play();
          };
        }

      	$("#play1").click(function() {
      		audio1.play();
      	});
      	$("#pause1").click(function() {
      		audio1.pause();
      	});
      	$("#stop1").click(function() {
      		audio1.pause();
      		audio1.currentTime=0;
      	});
      	$("#play2").click(function() {
      		audio2.play();
      	});
      	$("#pause2").click(function() {
      		audio2.pause();
      	});
      	$("#stop2").click(function() {
      		audio2.pause();
      		audio2.currentTime=0;
      	});
      	$(".next2").click(function() {

    			audio1.setAttribute('src', file);
      		audio1.load();
      		audio1.play();

      		return false;
      	});

      	$(".title").live('click', (function() {
      	  var track = $(this).parent().parent().hasClass('track1list') ? 1 : 2 ;
      	  var href = $(this).attr('href');
      	  var title = 'hello'
      	  setTrack(track, href, title);
      	  return false;
      	}));
      });

    </script>

    <style type='text/css'>
    body {
    margin:0;
    padding:0;
    height:100%;
    }
    .left
    {
    float:left;
    height:100%;
    width:50%;
    margin:auto;
    }
    .right
    {
    float:left;
    height:100%;
    width:50%;
    margin:auto;
    }
    </style>
  </head>
  <body>
    <div class='left'>
      <a class="track1" href=""></a>
      <ul class="buttons1">
        <li><a href="#" id="play1">Play</a></li>
        <li><a href="#" id="pause1">Pause</a></li>
        <li><a href="#" id="stop1">Stop</a></li>
        <!-- <li><a href="#" id="next1">Next Boo</a></li> -->
      </ul>
      Music
      <ul id="list1", class="track1list">
      </ul>
    </div>
    <div class='right'>
      <a class="track2" href=""></a>
      <ul class="buttons2">
        <li><a href="#" id="play2">Play</a></li>
        <li><a href="#" id="pause2">Pause</a></li>
        <li><a href="#" id="stop2">Stop</a></li>
        <!-- <li><a href="#" id="next2">Next Boo</a></li> -->
      </ul>
      Featured
      <ul id="list2", class="track2list">
      </ul>
    </div>
  </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script type="text/javascript">
	// file://localhost/Users/skattyadz/code/audio/index.htm?boo1=157217&boo2=3113

	$(document).ready(function(){
	var audio1 = document.createElement('audio');
	var audio2 = document.createElement('audio');
	audio1.volume=0.5;
	audio2.volume=1;

	var url2 = 'http://api.audioboo.fm/audio_clips/featured.jsonp?callback=?';
	var url1 = 'http://api.audioboo.fm/tag/music/audio_clips.jsonp?callback=?';

	$.getJSON(url2,function(json){
	$.each(json.body.audio_clips, function(i,boo){
	var item = $("#list2").append("<li><a class='title' href="+boo.urls['high_mp3']+">"+boo.title+"</a> [<a href='"+boo.urls['detail']+"'>link</a>]</li>")
	});
	});

	$.getJSON(url1,function(json){
	$.each(json.body.audio_clips, function(i,boo){
	$("#list1").append("<li><a class='title' href="+boo.urls['high_mp3']+">"+boo.title+"</a> [<a href='"+boo.urls['detail']+"'>link</a>]</li>")
	});
	});

	$.urlParam = function(name){
	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
	return (results && results[1]) \|\| 0;
	}

	if ($.urlParam('boo1')) {
	setTrack(1, 'http://boo.fm/b'+$.urlParam('boo1')+'.mp3');
	}
	if ($.urlParam('boo2')) {
	setTrack(2, 'http://boo.fm/b'+$.urlParam('boo2')+'.mp3');
	}

	function setTrack(track, path, title){
	$(".track"+track).html(title);
	$(".track"+track).attr('href', path);
	if (track==1) {
	audio1.pause();
	audio1.setAttribute('src', $(".track1").attr("href"));
	audio1.load();
	audio1.play();
	} else {
	audio2.pause();
	audio2.setAttribute('src', $(".track2").attr("href"));
	audio2.load();
	audio2.play();
	};
	}

	$("#play1").click(function() {
	audio1.play();
	});
	$("#pause1").click(function() {
	audio1.pause();
	});
	$("#stop1").click(function() {
	audio1.pause();
	audio1.currentTime=0;
	});
	$("#play2").click(function() {
	audio2.play();
	});
	$("#pause2").click(function() {
	audio2.pause();
	});
	$("#stop2").click(function() {
	audio2.pause();
	audio2.currentTime=0;
	});
	$(".next2").click(function() {

	audio1.setAttribute('src', file);
	audio1.load();
	audio1.play();

	return false;
	});

	$(".title").live('click', (function() {
	var track = $(this).parent().parent().hasClass('track1list') ? 1 : 2 ;
	var href = $(this).attr('href');
	var title = 'hello'
	setTrack(track, href, title);
	return false;
	}));
	});

	</script>

	<style type='text/css'>
	body {
	margin:0;
	padding:0;
	height:100%;
	}
	.left
	{
	float:left;
	height:100%;
	width:50%;
	margin:auto;
	}
	.right
	{
	float:left;
	height:100%;
	width:50%;
	margin:auto;
	}
	</style>
	</head>
	<body>
	<div class='left'>
	<a class="track1" href=""></a>
	<ul class="buttons1">
	<li><a href="#" id="play1">Play</a></li>
	<li><a href="#" id="pause1">Pause</a></li>
	<li><a href="#" id="stop1">Stop</a></li>
	<!-- <li><a href="#" id="next1">Next Boo</a></li> -->
	</ul>
	Music
	<ul id="list1", class="track1list">
	</ul>
	</div>
	<div class='right'>
	<a class="track2" href=""></a>
	<ul class="buttons2">
	<li><a href="#" id="play2">Play</a></li>
	<li><a href="#" id="pause2">Pause</a></li>
	<li><a href="#" id="stop2">Stop</a></li>
	<!-- <li><a href="#" id="next2">Next Boo</a></li> -->
	</ul>
	Featured
	<ul id="list2", class="track2list">
	</ul>
	</div>
	</body>
	</html>