Prototyping 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>
 
 <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>