< style type = "text/css" >
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1.4; letter-spacing: 1px;}
h2 {font-size: 24px;}
section {margin-bottom: 50px;}
table, th, td {vertical-align: top; border-collapse: separate; padding: 6px;}
button {width: 100px;}
< / style >
< body >
< section >
< h2 > Feedback composition< / h2 >
< / section >
<!-- <section>
< em > Hypothesis #1: I assume that gender representation is different in public spaces. What sounds reveal that? I assume that separation of public and private reflect that.
Experiment: I listen and record carefully sounds from the area that are coming from different spaces and voices. Exploring the private and public. Asking inhabitants to describe these sounds.< / em >
< / section > -->
< div >
< audio style = "width: 100%; background: #222;" id = "a1" controls src = "description-lidia-CUT.mp3" > < / audio >
< audio style = "width: 100%; background: #222;" id = "a2" controls src = "selection-track-extracts-1.mp3" > < / audio >
< audio style = "width: 100%; background: #222;" id = "a3" controls src = "description-eugenie-CUT-SHORT.mp3" > < / audio >
< button id = "b" > listen< / button >
< / div >
< table > < tr >
< td >
< div class = 'sub' >
< h3 > Lidia< / h3 >
< div > < a data-start = "0.4" href = "#" > 00:00:00,400< / a > A vint< / div >
< div > < a data-start = "8.18" href = "#" > 00:00:08,180< / a > A bag< / div >
< div > < a data-start = "16.54" href = "#" > 00:00:16,540< / a > Someone with a bag< / div >
< div > < a data-start = "28.52" href = "#" > 00:00:28,520< / a > Ok. Music< / div >
< div > < a data-start = "33.16" href = "#" > 00:00:33,160< / a > Nice music< / div >
< div > < a data-start = "50.86" href = "#" > 00:00:50,860< / a > What is that? Oh, the car, the market. I think< / div >
< div > < a data-start = "77.68" href = "#" > 00:01:17,680< / a > Wind< / div >
< div > < a data-start = "120.6" href = "#" > 00:02:00,600< / a > Wow< / div >
< div > < a data-start = "136.68" href = "#" > 00:02:16,680< / a > Children?< / div >
< / div >
< / td >
< td >
< div class = 'sub' >
< h3 > Eugenie< / h3 >
< div > < a data-start = "1.8" href = "#" > 00:00:01,800< / a > Children outside< / div >
< div > < a data-start = "10.76" href = "#" > 00:00:10,760< / a > I think it's outside< / div >
< div > < a data-start = "13.7" href = "#" > 00:00:13,700< / a > Shoes, walking people< / div >
< div > < a data-start = "20.44" href = "#" > 00:00:20,440< / a > Or maybe papers< / div >
< div > < a data-start = "27.48" href = "#" > 00:00:27,480< / a > Music inside< / div >
< div > < a data-start = "31.38" href = "#" > 00:00:31,380< / a > Chirring up< / div >
< div > < a data-start = "53.06" href = "#" > 00:00:53,060< / a > This is outside. It's a troll, it's a bag< / div >
< div > < a data-start = "58.24" href = "#" > 00:00:58,240< / a > Wheels< / div >
< div > < a data-start = "75.7" href = "#" > 00:01:15,700< / a > Water< / div >
< div > < a data-start = "90.9" href = "#" > 00:01:30,900< / a > People in a room. Inside. They are moving, close< / div >
< div > < a data-start = "114.62" href = "#" > 00:01:54,620< / a > It's inside somewhere, somewhere...< / div >
< div > < a data-start = "135.4" href = "#" > 00:02:15,400< / a > Children in a swimming pool< / div >
< / div >
< / td >
< / tr >
< / table >
< script >
var a1 = document.getElementById("a1"),
a2 = document.getElementById("a2"),
b = document.getElementById("b");
b.addEventListener("click", function () {
if (a1.paused) {
a1.play();
a2.play();
a3.play();
} else {
a1.pause();
a2.pause();
a3.pause();
}
})
a1.addEventListener("play", function(){
b.innerHTML="pause"
})
a1.addEventListener("pause", function(){
b.innerHTML="play"
})
var links=document.querySelectorAll("div.sub a")
for (var i=0, l=links.length; i< l ; i + + ) {
var a = links[i];
a.addEventListener("click", function(e) {
console.log("CLICK", this);
var t=parseFloat(this.getAttribute("data-start"))
a1.currentTime=t
a2.currentTime=t
a3.currentTime=t
e.preventDefault()
a1.play();
a2.play();
a3.play();
})
}
< / script >
< / body >
