Prototyping 19 November 2012

From Media Design: Networked & Lens-Based wiki
Jump to navigation Jump to search

The origin and theory of the cut-up, annotated audio, essay on ubuweb.

Shuffle

Javascript doesn't include a built-in function to shuffle an array, but there are lots of "recipes" to do it.

For instance: http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript

var shuffle = function (o) {
    for (var j,x,i=o.length; i; j=parseInt(Math.random()*i), x=o[--i], o[i] = o[j], o[j] = x);
    return o;
}

Audio cut-up

The BBC World Service produces and releases an hourly "headlines" recording

random play audio code

the html (put inside the body tag of an html page)

<audio controls onpause="onpause()" ondurationchange="jump ()" src = "http://wsdownload.bbc.co.uk/worldservice/css/96mp3/latest/bbcnewssummary.mp3"></audio>

You can put the script at the end of the page (after the audio tag!):

<script>
var a = document.getElementsByTagName('audio')[0]
var id 

function jump (){
    //var a = document.getElementsByTagName('audio')[0]
    a.currentTime=Math.random()*a.duration
    a.play()
    id=setTimeout(jump,3000)
}

function onpause (){	
   clearTimeout(id)
}
</script>

Cut-ups code 2 (no repeats)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>

var shuffle = function (o) {
    for (var j,x,i=o.length; i; j=parseInt(Math.random()*i), x=o[--i], o[i] = o[j], o[j] = x);
    return o;
}
var audio, cuts;
var cutnum = -1, end, seeked = false;
function audio_ready () {
    var pos = 0;
    audio = document.getElementById("crystal");
    // console.log("audio", audio, audio.duration);
    cuts = [];
    while (pos<audio.duration) {
        var length = 1 + (Math.random()*3);
        var end = pos + length;
        if (end >= audio.duration) end = audio.duration;
        cuts.push([pos, end]);
        pos += length;
    }
    // console.log(cuts);
    shuffle(cuts);
    // console.log(cuts);
    next();
}
function next () {
    cutnum+=1;
    // console.log("next", cutnum);
    if (cutnum < cuts.length) {
        seeked = false;
        audio.currentTime = cuts[cutnum][0];
        audio.play();
        end = cuts[cutnum][1];
    } else {
        // console.log("over");
        audio.pause();
    }
}
function audio_update () {
    // console.log("audio_update", audio.currentTime, end);
    if (seeked && audio.currentTime >= end) {
        next();
    }
}
function audio_seeked () {
    // console.log("seeked");
    seeked = true;
}

</script>
</head>
<body>

<audio id="crystal" controls ondurationchange="audio_ready()" ontimeupdate="audio_update()" onseeked="audio_seeked()">
<source src="http://wsdownload.bbc.co.uk/worldservice/css/32mp3/latest/bbcnewssummary.mp3" />
<source src="days.ogg" />
<source src="/video/ArtAppreciation.ogg" type="audio/ogg" />
</audio>

</body>
</html>