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
Audio tag
So what's the "materiality" of digital audio in the browser?
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>