Created
December 23, 2017 00:48
-
-
Save drart/31f670d0beecb074bb0c726416c8af13 to your computer and use it in GitHub Desktop.
First working version of SLIDE. Multiple audio tags have problems with staggered loading. Going to move to toggling the src attribute.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment