Prototyping 16 April 2013: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
 
(14 intermediate revisions by 3 users not shown)
Line 1: Line 1:
t a p e s and javascript
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/
http://www.schillmania.com/projects/soundmanager2/demo/cassette-tape/


{{youtube|M9qyArBbFVY}} http://www.youtube.com/watch?v=B6ryO3090oE
{{youtube|M9qyArBbFVY}} {{youtube|B6ryO3090oE}}
 
{{youtube|6CyDJ-Ik_eE}} http://akionda.net/images/news_louvre_2.jpg
 
Andrew Prior: https://soundcloud.com/geckohooks/tapeoperations
 
HavblikAudio: http://www.myspace.com/havblikaudio/photos/albums/berlin/846774
 
[http://www.blog.some-assembly-required.net/2007/01/janek-schaefer.html Janek Schaefer]
 
{{vimeo|23554437}} {{vimeo|23556662}}
 
[http://www.audioh.com/projects/triphonic.html 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.
 
<source lang="javascript">
$(audio).bind("durationchange", function () {
    audio.currentTime = 60;
    audio.play();
}).bind("timeupdate", function () {
    if (audio.currentTime >= 63) {
        audio.pause();
    }
});
</source>
 
== AudioLooper ==
 
=== Loop ===
 
<source lang="javascript">
<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>


{{youtube|6CyDJ-Ik_eE}}
</source>


http://akionda.net/images/news_louvre_2.jpg
==recursive exercise using jQuery+ CSS==
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<source lang="html4strict">
<style type="text/css">


https://soundcloud.com/geckohooks/tapeoperations
div.box {
padding:10px;
background:red;
border:1px dashed black;
color:white;
width: 1000px;


http://www.myspace.com/havblikaudio/photos/albums/berlin/846774
      }
      </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>
<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");


{{vimeo|23554437}}  
  var die=function(){
              baby.hide(1000).show(1000, swell)
  }
  var swell=function(){
              baby.animate({width: '1000px'}, die)
  }


[http://www.blog.some-assembly-required.net/2007/01/janek-schaefer.html Janek Schaefer] and his [http://www.audioh.com/projects/triphonic.html Tri-phonic record player]
  die();
http://www.audioh.com/images/triphonic_explained.jpg
  }
  )
</script>
</source>


{{vimeo|23556662}}
== Triphonic Audio Player ==
[[Triphonic player]]

Latest revision as of 15:52, 17 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

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

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

Triphonic Audio Player

Triphonic player

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=Prototyping_16_April_2013&oldid=45049"