Prototyping 16 April 2013: Difference between revisions

Revision as of 15:49, 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/

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

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>

<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();
  		}
  	)