Prototyping 16 April 2013: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
Line 100: Line 100:


</source>
</source>
==recursive exercise using jQuery+ CSS==
<style type="text/css">
      div.box {
      padding:10px;
background:red;
border:1px dashed black;
color:white;
width: 1000px;
      }
      </style>
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
 
  <body>
  <audio controls>
  <source src="http://wsdownload.bbc.co.uk/worldservice/css/96mp3/latest/bbcnewssummary.mp3">
  <source src="http://pzwart3.wdka.hro.nl/~mmurtaugh/bbcnewssummary.ogg">
</audio>
<source lang="html4strict">
<button id="but">
press me
  </button>
  <script >
  $("#but").bind('click',
  function(){
  var baby = $("<div>baby</div>")
    .appendTo("body")
    .addClass ("box")
 
    .css("width", Math.floor(Math.random()*200) +"px");
  var die=function(){
              baby.hide(1000).show(1000, swell)
  }
  var swell=function(){
              baby.animate({width: '1000px'}, die)
  }
  die();
  }
  )
  $("audio").bind("durationchange",
function () {
$("audio").get(0).currentTime = 30
$("audio").get(0).play()
//console.log($("audio").get(0).duration)
}
)
$("audio").bind("timeupdate",
function () {
// console.log(this.currentTime)
if (this.currentTime >= 33){
//this.currentTime = 60
$(this).trigger("durationchange")
}
  }
)
</script>

Revision as of 15:34, 16 April 2013

t a p e s and javascript

a range of interpretations of cassettes from nostaligic recreation and high tech over-determined design, through to contemporary music practices with tapes and turntables. What is the materiality of digital audio?

http://www.schillmania.com/projects/soundmanager2/demo/cassette-tape/

news_louvre_2.jpg

Andrew Prior: https://soundcloud.com/geckohooks/tapeoperations

HavblikAudio: http://www.myspace.com/havblikaudio/photos/albums/berlin/846774

Janek Schaefer

http://vimeo.com/23554437

http://vimeo.com/23556662

Tri-phonic record player

Audio tag

So what's the "materiality" of digital audio in the browser?

Audio (HTML tag)

A Script (Performance)

The Audio Tag

When asked to "load":
    Say: "loaded" and then a few seconds later "durationchange"
When asked your "currentTime":
   Report the number you're standing closest to.
When asked to set your "currentTime":
   Move to the number requested
When asked to "play":
    start moving towards higher numbers
When moving and you cross a new number:
    Say: "timeupdate"

Callback 1

When AUDIO says "durationchange":
    Tell AUDIO: "Set currentTime to 60" and then (after a few seconds) "play"

Callback 2

When AUDIO says "timeupdate":
    Ask AUDIO: What is your "currentTime"
    If it's response is 63 or bigger:
        Tell AUDIO: "pause"

Javascript

Javascript version of the above.

$(audio).bind("durationchange", function () {
    audio.currentTime = 60;
    audio.play();
}).bind("timeupdate", function () {
    if (audio.currentTime >= 63) {
        audio.pause();
    }
});

AudioLooper

Loop

<script src="http://code.jquery.com/jquery-1.9.1.min.js" > </script>

<audio controls>
	<source src="http://wsdownload.bbc.co.uk/worldservice/css/96mp3/latest/bbcnewssummary.mp3">
	<source src="http://pzwart3.wdka.hro.nl/~mmurtaugh/bbcnewssummary.ogg">
</audio>

<script> 
$("audio").bind("durationchange", 
	function () {
		$("audio").get(0).currentTime = 30
		$("audio").get(0).play()
		console.log($("audio").get(0).duration)
	}
)

$("audio").bind("timeupdate", 
	function () {
		console.log(this.currentTime)
		if (this.currentTime >= 33){
				//this.currentTime = 60
				$(this).trigger("durationchange")
		}
	}
)

</script>

recursive exercise using jQuery+ CSS

<style type="text/css">

     div.box {
     	padding:10px;

background:red; border:1px dashed black; color:white; width: 1000px;

     }
     </style>
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
 
 <body>
 <audio controls>
 <source src="http://wsdownload.bbc.co.uk/worldservice/css/96mp3/latest/bbcnewssummary.mp3">
 <source src="http://pzwart3.wdka.hro.nl/~mmurtaugh/bbcnewssummary.ogg">

</audio> <source lang="html4strict"> <button id="but"> press me

 	</button>
 	<script >
 	$("#but").bind('click',
 		function(){

var baby = $("

baby

")

 			  .appendTo("body")
 			  .addClass ("box")
 			
 			  .css("width", Math.floor(Math.random()*200) +"px");
 			var die=function(){
             baby.hide(1000).show(1000, swell)
 			}
 			var swell=function(){
             baby.animate({width: '1000px'}, die)
 			}
 			die();
 		}
 	)
 $("audio").bind("durationchange", 

function () { $("audio").get(0).currentTime = 30 $("audio").get(0).play() //console.log($("audio").get(0).duration) } )

$("audio").bind("timeupdate", function () { // console.log(this.currentTime) if (this.currentTime >= 33){ //this.currentTime = 60 $(this).trigger("durationchange") }

 }

) </script>