Prototyping 19 November 2012: Difference between revisions

Latest revision as of 19:12, 27 November 2012

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

Audio feed (high quality)
HTML5 media events (timeupdate, durationchange, seeked)
Live demo of HTML5 player events
HTML5 media events

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>