drart/slide.html

## slide.html
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>SLIDE - Adam Tindale</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
    <!--script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.sound.min.js"></script-->
    <style>
        html {
            font-size: 10pt;
            font-family:Georgia,Serif;
        }
        a {
            text-decoration:none;
            color:black;
        }
        #info{
            text-align:right;
            position:fixed;
            bottom:10px;
            right: 10px;
        }
        canvas {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
</head>
<body>

 <audio id="track1">
    <source src="track1.mp3">
    <source src="track1.wav">
 </audio>

 <audio id="track2">
    <source src="track2.mp3">
    <source src="track2.wav">
 </audio>

 <audio id="track3">
    <source src="track3.mp3">
    <source src="track3.wav">
 </audio>

 </div>

     <div id="info">
        Slide<br>
        <span id="t1">1 - 8:19</span><br>
        <span id="t2">2 - 7:46</span><br>
        <span id="t3">3 - 4:04</span><br>
        <br>
        <a href="http://www.adamtindale.com">Adam Tindale</a> <br>
    </div>
    <script>
        var _gaq = [['_setAccount', 'UA-18509679-1'], ['_trackPageview']];
        (function(d, t) {
            var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];
            g.async = true;
            g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g, s);
        })(document, 'script');
    </script>
    <script>
       var audiotracks = document.getElementsByTagName("audio");
       var currenttrack = undefined;
       for (var i = 0; i < audiotracks.length; i++){
           audiotracks[i].load();
       }

       function playtrack(track){
           for (var i = 0; i < audiotracks.length; i++){
               currenttrack = track;
               if (i === track){
                   audiotracks[i].play();
               }else{
                   audiotracks[i].pause();
               }
           }
       }

        document.getElementById("t1").addEventListener("click", function(e){
            playtrack(0);
        });

        document.getElementById("t2").addEventListener("click", function(e){
            playtrack(1);
        });

        document.getElementById("t3").addEventListener("click", function(e){
            playtrack(2);
        });


        audiotracks[0].addEventListener('ended', function(){
            playtrack(1);
        });

        audiotracks[1].addEventListener('ended', function(){
            playtrack(2);
        });

        audiotracks[2].addEventListener('ended', function(){
            currenttrack = undefined;
        });

        var l1, l2, l3;


        audiotracks[0].addEventListener('progress', function(){
            console.log('loading track 1');
        });

        audiotracks[1].addEventListener('progress', function(){
            console.log('loading track 2');
        });

        audiotracks[2].addEventListener('progress', function(){
            console.log('loading track 3');
        });

    </script>
    <script>
        function setup() {
              createCanvas(windowWidth, windowHeight);
          }
          function windowResized() {
                resizeCanvas(windowWidth, windowHeight);

            }

          function draw() {
              background(255);
              noFill();

              if(audiotracks[0].readyState === 4){
                  l1 = audiotracks[0].buffered.end( audiotracks[0].buffered.length-1 ) /audiotracks[0].duration;
              }
              if(audiotracks[1].readyState === 4){
                  l2 = audiotracks[1].buffered.end( audiotracks[1].buffered.length-1  ) /audiotracks[1].duration;
              }
              if(audiotracks[2].readyState === 4){
                  l3 = audiotracks[2].buffered.end( audiotracks[2].buffered.length-1  ) /audiotracks[2].duration;
              }
              arc(60, height-60, 50,50, 0, l1 * TWO_PI);
              arc(60, height-60, 40,40, 0, l2 * TWO_PI);
              arc(60, height-60, 30,30, 0, l3 * TWO_PI);

              if (currenttrack !==undefined){
                  fill(100);
                  noStroke();
                  var l = audiotracks[currenttrack].currentTime / audiotracks[currenttrack].duration;
                  rect(0,0, l * width, 10);
              }

              stroke(0);
              if (currenttrack ===0){fill(0);}else{fill(255)}
              rect(width/3, height/3, width/5,height/5);
              if (currenttrack === 1){fill(0);}else{fill(255)}
              rect(width/2, height/2, width/5,height/5);
              if (currenttrack === 2){fill(0);}else{fill(255)}
              rect(2*width/3, 2*height/3, width/5,height/5);
          }

          function mousePressed(){
             if(mouseY < 10){
                 if(currenttrack !== undefined){
                     audiotracks[currenttrack].currentTime = mouseX/width * audiotracks[currenttrack].duration;
                 }
                 return;
             }
             if (mouseX > 2*width/3 && mouseX < (2*width/3 + width/5) && mouseY > 2*height/3 && mouseY < (2*height/3 + height/5)){
                  playtrack(2);
                  return;
              }
             if (mouseX > width/2 && mouseX < (width/2 + width/5) && mouseY > height/2 && mouseY < (height/2 + height/5)){
                  playtrack(1);
                  return;
              }

              if (mouseX > width/3 && mouseX < (width/3 + width/5) && mouseY > height/3 && mouseY < (height/3 + height/5)){
                  playtrack(0);
              }

          }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>SLIDE - Adam Tindale</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
	<!--script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.sound.min.js"></script-->
	<style>
	html {
	font-size: 10pt;
	font-family:Georgia,Serif;
	}
	a {
	text-decoration:none;
	color:black;
	}
	#info{
	text-align:right;
	position:fixed;
	bottom:10px;
	right: 10px;
	}
	canvas {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	}
	</style>
	</head>
	<body>

	<audio id="track1">
	<source src="track1.mp3">
	<source src="track1.wav">
	</audio>

	<audio id="track2">
	<source src="track2.mp3">
	<source src="track2.wav">
	</audio>

	<audio id="track3">
	<source src="track3.mp3">
	<source src="track3.wav">
	</audio>

	</div>

	<div id="info">
	Slide<br>
	<span id="t1">1 - 8:19</span><br>
	<span id="t2">2 - 7:46</span><br>
	<span id="t3">3 - 4:04</span><br>
	<br>
	<a href="http://www.adamtindale.com">Adam Tindale</a> <br>
	</div>
	<script>
	var _gaq = [['_setAccount', 'UA-18509679-1'], ['_trackPageview']];
	(function(d, t) {
	var g = d.createElement(t),
	s = d.getElementsByTagName(t)[0];
	g.async = true;
	g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	s.parentNode.insertBefore(g, s);
	})(document, 'script');
	</script>
	<script>
	var audiotracks = document.getElementsByTagName("audio");
	var currenttrack = undefined;
	for (var i = 0; i < audiotracks.length; i++){
	audiotracks[i].load();
	}

	function playtrack(track){
	for (var i = 0; i < audiotracks.length; i++){
	currenttrack = track;
	if (i === track){
	audiotracks[i].play();
	}else{
	audiotracks[i].pause();
	}
	}
	}

	document.getElementById("t1").addEventListener("click", function(e){
	playtrack(0);
	});

	document.getElementById("t2").addEventListener("click", function(e){
	playtrack(1);
	});

	document.getElementById("t3").addEventListener("click", function(e){
	playtrack(2);
	});


	audiotracks[0].addEventListener('ended', function(){
	playtrack(1);
	});

	audiotracks[1].addEventListener('ended', function(){
	playtrack(2);
	});

	audiotracks[2].addEventListener('ended', function(){
	currenttrack = undefined;
	});

	var l1, l2, l3;


	audiotracks[0].addEventListener('progress', function(){
	console.log('loading track 1');
	});

	audiotracks[1].addEventListener('progress', function(){
	console.log('loading track 2');
	});

	audiotracks[2].addEventListener('progress', function(){
	console.log('loading track 3');
	});

	</script>
	<script>
	function setup() {
	createCanvas(windowWidth, windowHeight);
	}
	function windowResized() {
	resizeCanvas(windowWidth, windowHeight);

	}

	function draw() {
	background(255);
	noFill();

	if(audiotracks[0].readyState === 4){
	l1 = audiotracks[0].buffered.end( audiotracks[0].buffered.length-1 ) /audiotracks[0].duration;
	}
	if(audiotracks[1].readyState === 4){
	l2 = audiotracks[1].buffered.end( audiotracks[1].buffered.length-1 ) /audiotracks[1].duration;
	}
	if(audiotracks[2].readyState === 4){
	l3 = audiotracks[2].buffered.end( audiotracks[2].buffered.length-1 ) /audiotracks[2].duration;
	}
	arc(60, height-60, 50,50, 0, l1 * TWO_PI);
	arc(60, height-60, 40,40, 0, l2 * TWO_PI);
	arc(60, height-60, 30,30, 0, l3 * TWO_PI);

	if (currenttrack !==undefined){
	fill(100);
	noStroke();
	var l = audiotracks[currenttrack].currentTime / audiotracks[currenttrack].duration;
	rect(0,0, l * width, 10);
	}

	stroke(0);
	if (currenttrack ===0){fill(0);}else{fill(255)}
	rect(width/3, height/3, width/5,height/5);
	if (currenttrack === 1){fill(0);}else{fill(255)}
	rect(width/2, height/2, width/5,height/5);
	if (currenttrack === 2){fill(0);}else{fill(255)}
	rect(2width/3, 2height/3, width/5,height/5);
	}

	function mousePressed(){
	if(mouseY < 10){
	if(currenttrack !== undefined){
	audiotracks[currenttrack].currentTime = mouseX/width * audiotracks[currenttrack].duration;
	}
	return;
	}
	if (mouseX > 2width/3 && mouseX < (2width/3 + width/5) && mouseY > 2height/3 && mouseY < (2height/3 + height/5)){
	playtrack(2);
	return;
	}
	if (mouseX > width/2 && mouseX < (width/2 + width/5) && mouseY > height/2 && mouseY < (height/2 + height/5)){
	playtrack(1);
	return;
	}

	if (mouseX > width/3 && mouseX < (width/3 + width/5) && mouseY > height/3 && mouseY < (height/3 + height/5)){
	playtrack(0);
	}

	}
	</script>
	</body>
	</html>