< html lang = "en" >
< head >
< meta charset = "utf-8" >
< link href = "styles/widescreen.css" rel = "stylesheet" type = "text/css" >
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
< link href = "styles/jquery-ui.css" rel = "stylesheet" type = "text/css" >
< script src = "https://code.jquery.com/jquery-1.12.4.js" > < / script >
< script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > < / script >
< script src = "js/draggable.js" > < / script >
< script src = "js/jquery.ui.touch-punch.min.js" > < / script >
< title > Player< / title >
< link rel = "shortcut icon" href = "images/speaker_logo.png" / >
< style type = "text/css" >
a {
text-decoration: none;
color: #A19696;
}
< / style >
< / head >
< body >
< section style = "margin-bottom: 20%;" >
<!-- draggable audio tags/images -->
< div class = "ciclegraph" >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190328-leeszaal-6.jpg" target = "_blank" >
< img src = "images/meeting-20190328-leeszaal-6.jpg" style = "width:100%" >
< / a >
< p > warming up @Leeszaal 28/3< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-discussing-20190530.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190530-leeszaal-4.jpg" target = "_blank" >
< img src = "images/meeting-20190530-leeszaal-4.jpg" style = "width:100%" >
< / a >
< p > discussing about voice in public @Leeszaal 30/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-meeting-transcribing-20190508.mp3" class = "audio-tag" > < / audio >
< a href = "images/vowels-20190508-leeszaal-3.jpg" target = "_blank" >
< img src = "images/vowels-20190508-leeszaal-3.jpg" style = "width:100%" >
< / a >
< p > trascribing+singing vowels @Leeszaal 3/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-meeting-extracts-20190523.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190523-leeszaal-6.jpg" target = "_blank" >
< img src = "images/meeting-20190523-leeszaal-6.jpg" style = "width:100%" >
< / a >
< p > reading extracts @outside Leeszaal 23/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-meetings-choir.mp3" class = "audio-tag" > < / audio >
< a href = "images/vowels-20190328-leeszaal.jpg" target = "_blank" >
< img src = "images/vowels-20190328-leeszaal.jpg" style = "width:100%" >
< / a >
< p > singing vowels @Leeszaal 28/3< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-meeting-warming-20190523.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190523-leeszaal-7.jpg" target = "_blank" >
< img src = "images/meeting-20190523-leeszaal-7.jpg" style = "width:100%" >
< / a >
< p > warming up @outside Leeszaal 23/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/distort_leeszaal_20190523-1341.mp3" class = "audio-tag" > < / audio >
< a href = "" target = "_blank" >
< img src = "images/meeting-20190523-leeszaal-2.jpg" style = "width:100%" >
< / a >
< p > personal experiences-distorted voice @outside Leeszaal 23/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-extracts-20190530.mp3" class = "audio-tag" > < / audio >
< a href = "images/fresh1.jpg" target = "_blank" >
< img src = "images/fresh1.jpg" style = "width:100%" >
< / a >
< p > reading extracts @Leeszaal 30/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/finearts-meeting-discussion.mp3" class = "audio-tag" > < / audio >
< a href = "" target = "_blank" > < img src = "images/meeting-20190329-finearts-1.JPG" style = "width:100%" / > < / a >
< p > discussing about voice in public @Fine Arts 29/3< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-meeting-warming-20190508.mp3" class = "audio-tag" > < / audio >
< a href = "" target = "_blank" > < img src = "images/meeting-20190508_leeszaal.jpg" style = "width:100%" / > < / a >
< p > warming up @Leeszaal 8/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-meetings-transcribing.mp3" class = "audio-tag" > < / audio >
< a href = "" target = "_blank" > < img src = "images/meeting-20190328-leeszaal-1.JPG" style = "width:100%" / > < / a >
< p > transcribing vowels @Leeszaal 28/3< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-warming-20190530.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190530-leeszaal-2.jpg" target = "_blank" > < img src = "images/meeting-20190530-leeszaal-2.jpg" style = "width:100%" / > < / a >
< p > warming up @Leeszaal 30/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/finearts-meeting-choir.mp3" class = "audio-tag" > < / audio >
< a href = "" target = "_blank" > < img src = "images/vowels-20190329-finearts.jpg" style = "width:100%" / > < / a >
< p > singing vowels @Fine Arts 29/3< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-coffee-20190530.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190530-leeszaal-3.jpg" target = "_blank" > < img src = "images/meeting-20190530-leeszaal-3.jpg" style = "width:100%" / > < / a >
< p > coffee time @Leeszaal 30/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/distort_leeszaal_20190523-1336.mp3" class = "audio-tag" > < / audio >
< a href = "" target = "_blank" >
< img src = "images/meeting-20190523-leeszaal-1.jpg" style = "width:100%" >
< / a >
< p > singing vowels-distorted voice @outside Leeszaal 23/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/finearts-meeting-transcribing.mp3" class = "audio-tag" > < / audio >
< a href = "" target = "_blank" >
< img src = "images/meeting-20190329-finearts-2.JPG" style = "width:100%" / >
< / a >
< p > transcribing vowels @Fine Arts 29/3< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/finearts-meeting-extracts.mp3" class = "audio-tag" > < / audio >
< a href = "images/carson-extract.jpg" target = "_blank" >
< img src = "images/carson-extract.jpg" style = "width:100%" / >
< / a >
< p > reading extracts @Fine Arts 29/3< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-meeting-transcribing-20190523.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190523-leeszaal-4.jpg" target = "_blank" >
< img src = "images/meeting-20190523-leeszaal-4.jpg" style = "width:100%" >
< / a >
< p > transcribing vowels @outside Leeszaal 23/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-sentenses-distorted-20190530.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190530-leeszaal-1.jpg" target = "_blank" >
< img src = "images/meeting-20190530-leeszaal-1.jpg" style = "width:100%" >
< / a >
< p > statements- distorted voice @Leeszaal 30/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-meetings-discussion.mp3" class = "audio-tag" > < / audio >
< a href = "" target = "_blank" >
< img src = "images/meeting-20190328-leeszaal-2.JPG" style = "width:100%" / > < / a >
< p > discussing about voice in public @Leeszaal 28/3< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-singing-distorted-20190530.mp3" class = "audio-tag" > < / audio >
< a href = "images/vowels-20190508-leeszaal-1.jpg" target = "_blank" >
< img src = "images/vowels-20190508-leeszaal-1.jpg" style = "width:100%" / > < / a >
< p > singing vowels- distorted voice @Leeszaal 30/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/finearts-meeting-choirhigh.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190329-finearts-5.JPG" target = "_blank" > < img src = "images/meeting-20190329-finearts-5.JPG" style = "width:100%" / > < / a >
< p > singing vowels (high) @Fine Arts 29/3< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/leeszaal-meeting-extracts-20190508.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190328-leeszaal-4.jpg" target = "_blank" > < img src = "images/meeting-20190328-leeszaal-4.jpg" style = "width:100%" / > < / a >
< p > reading extracts @Leeszaal 8/5< / p >
< / div >
< div class = "draggable-circle circle" >
< audio controls src = "audio/finearts-meeting-warming.mp3" class = "audio-tag" > < / audio >
< a href = "images/meeting-20190329-finearts-4.JPG" target = "_blank" > < img src = "images/meeting-20190329-finearts-4.JPG" style = "width:100%" / > < / a >
< p > warming up @Fine Arts 29/3< / p >
< / div >
< / div >
<!-- draggable youtube links and other -->
<!-- sources -->
< div id = "show1" class = "draggable scaleable-wrapper" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < iframe width = "90%" height = "90%" src = "https://www.youtube.com/embed/HlvfPizooII" frameborder = "0" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe > < / div >
< div id = "show2" class = "draggable scaleable-wrapper" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < iframe width = "90%" height = "90%" src = "https://www.youtube.com/embed/JVpoOdz1AKQ" frameborder = "0" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe > < / div >
< div id = "show3" class = "draggable scaleable-wrapper" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < iframe width = "90%" height = "90%" src = "https://www.youtube.com/embed/SirOxIeuNDE" frameborder = "0" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe > < / div >
< div id = "show4" class = "draggable scaleable-wrapper" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < iframe width = "90%" height = "90%" src = "https://www.youtube.com/embed/TY96Ma6YdtQ" frameborder = "0" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe > < / div >
<!-- links -->
< div class = "draggable box_metadata" style = "top: 40%; left:0.5%; width: 500px !important" >
< h2 > Online Sources< / h2 >
< li id = "angela" >
< a href = "#" > Angela Davis @Occupy Wall Street< / a >
< / li >
< li id = "judith" >
< a href = "#" > Judith Butler @Occupy Wall Street< / a >
< / li >
< li id = "laurie" >
< a href = "#" > Laurie Anderson - Mach 20< / a >
< / li >
< li id = "dana" >
< a href = "https://www.thisamericanlife.org/667/wartime-radio" target = "_blank" > Ballout, D. (2019) ‘ ’ < / a >
< / li >
< li id = "katalin" >
< a href = "#" > Vocal performance of Katalin Ladik in the film ‘ ’ < / a >
< / li >
< / div >
< script >
// draggable video pop up
$("#angela").click(function(){
$("#show1").fadeIn()
console.log("around")
});
$("#judith").click(function(){
$("#show2").fadeIn()
console.log("around")
});
$("#laurie").click(function(){
$("#show3").fadeIn()
console.log("around")
});
$("#katalin").click(function(){
$("#show4").fadeIn()
console.log("around")
});
< / script >
< / section >
<!-- soundwalk player -->
< div class = "draggable full-width" style = "top: 160%; left:0.2%" >
< button id = "but" > < h3 > listen< / h3 > < / button >
First sample of city sounds related to public/private and speech and recordings of descriptions from different people
< div class = "tooltip-wrap no-pink" >
< audio style = "width: 100%;" id = "a1" controls src = "audio/selection-track-extracts-1.mp3" class = "audio-tag" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
< div > selection of audio recordings collected while wandering around the area of Leeszaal< / div >
< / div >
< / div >
< div class = "tooltip-wrap no-pink" >
< audio ontimeupdate = "playTranscript()" style = "width: 100%; background: #222;" id = "a2" controls src = "audio/description-lidia-CUT.mp3" class = "audio-tag" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
< div id = "transcriptWrapper" class = 'sub' >
< h3 > Lidia< / h3 >
< div id = "transcript" >
< 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 > < / div >
< / div > < / div >
< div class = "tooltip-wrap no-pink" >
< audio ontimeupdate = "playTranscript3()" style = "width: 100%; background: #222;" id = "a3" controls src = "audio/description-eugenie-CUT-SHORT.mp3" class = "audio-tag" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
< div id = "transcriptWrapper3" class = 'sub' >
< h3 > Eugenie< / h3 >
< div id = "transcript3" >
< 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 > Chilling 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 > < / div >
< / div > < / div >
< div class = "tooltip-wrap no-pink" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "a4" controls src = "audio/description-alex1.mp3" class = "audio-tag" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
< div class = 'sub' >
< h3 > Alex< / h3 >
< div > < a data-start = "11.74" href = "#" > 00:00:11,740< / a > Em... I hear... It sounds like walking and it's quite windy outside< / div >
< div > < a data-start = "18.62" href = "#" > 00:00:18,620< / a > But it sounds like... It's... The microphone is inside or something< / div >
< div > < a data-start = "26.98" href = "#" > 00:00:26,980< / a > It's probably music< / div >
< div > < a data-start = "30.32" href = "#" > 00:00:30,320< / a > From a car maybe or from some radio?< / div >
< div > < a data-start = "37.6" href = "#" > 00:00:37,600< / a > It's outside on the street. I hear some cars in the background< / div >
< div > < a data-start = "48.7" href = "#" > 00:00:48,700< / a > Mmmm... It sounds like gardening sounds< / div >
< div > < a data-start = "54.82" href = "#" > 00:00:54,820< / a > There are people in the background or maybe it's bikes< / div >
< div > < a data-start = "65.84" href = "#" > 00:01:05,840< / a > Oh I hear a bird in the background< / div >
< div > < a data-start = "72.12" href = "#" > 00:01:12,120< / a > A very monotone sound< / div >
< div > < a data-start = "76.74" href = "#" > 00:01:16,740< / a > It's like driving, maybe driving in a car< / div >
< div > < a data-start = "95.12" href = "#" > 00:01:35,120< / a > And some wind around
It seems like outside but there is some noise in the background< / div >
< div > < a data-start = "96.58" href = "#" > 00:01:36,580< / a > It seems like outside but there is some noise in the background< / div >
< div > < a data-start = "106.34" href = "#" > 00:01:46,340< / a > It's outside< / div >
< div > < a data-start = "124.92" href = "#" > 00:02:04,920< / a > Oh, I hear children in the background crying< / div >
< div > < a data-start = "124.94" href = "#" > 00:02:04,940< / a > There is some weird sound in the foreground, which I... It's hard to describe [chuckling]
Oh, I hear children in the background crying< / div >
< div > < a data-start = "128.36" href = "#" > 00:02:08,360< / a > There is some weird sound in the foreground, which I... It's hard to describe [chuckling]< / div >
< div > < a data-start = "134.9" href = "#" > 00:02:14,900< / a > Again it sounds like there is a kindergarten or school nearby< / div >
< / div >
< / div > < / div >
< / div >
< br > < br >
<!-- second sounwalk player -->
< div class = "draggable full-width" style = "top: 190%; left:0.2%" >
< button id = "butB" > < h3 > listen< / h3 > < / button >
Second sample of city sounds related to public/private and speech and recordings of descriptions from different people
< div class = "tooltip-wrap no-pink" >
< audio style = "width: 100%; background: #FFFFFF;" id = "b1" controls src = "audio/selectionB.mp3" class = "audio-tag" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
< div > selection of audio recordings collected while wandering around the area of Leeszaal< / div >
< / div >
< / div >
< div class = "tooltip-wrap no-pink" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "b2" controls src = "audio/description-tommi.mp3" class = "audio-tag" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
< div class = 'subB' >
< h3 > Tommi< / h3 >
< div > < a data-start = "12.98" href = "#" > 00:00:12,980< / a > This is some water ** maybe from a fountain< / div >
< div > < a data-start = "61.48" href = "#" > 00:01:01,480< / a > Plates< / div >
< div > < a data-start = "64.44" href = "#" > 00:01:04,440< / a > A bus at stand by at a bus stop< / div >
< div > < a data-start = "70.02" href = "#" > 00:01:10,020< / a > Some people are chatting< / div >
< div > < a data-start = "76.94" href = "#" > 00:01:16,940< / a > Some kids talking talking while they are playing in the sand or something< / div >
< div > < a data-start = "87.94" href = "#" > 00:01:27,940< / a > Two people having a conversation on a street< / div >
< div > < a data-start = "96.28" href = "#" > 00:01:36,280< / a > One of them is walking away [chuckling]< / div >
< div > < a data-start = "102.1" href = "#" > 00:01:42,100< / a > And now a car is passing< / div >
< div > < a data-start = "110.6" href = "#" > 00:01:50,600< / a > It's a construction site< / div >
< div > < a data-start = "113.3" href = "#" > 00:01:53,300< / a > Something is being hammered< / div >
< div > < a data-start = "121.2" href = "#" > 00:02:01,200< / a > Some sports match or something< / div >
< div > < a data-start = "124.16" href = "#" > 00:02:04,160< / a > Everyone is **< / div >
< div > < a data-start = "132.54" href = "#" > 00:02:12,540< / a > Someone is speaking Arabic< / div >
< div > < a data-start = "138.76" href = "#" > 00:02:18,760< / a > To a group of people< / div >
< div > < a data-start = "142.76" href = "#" > 00:02:22,760< / a > It's like a very large voluminous space [chuckling] cause it's echoing a lot< / div >
< div > < a data-start = "156.76" href = "#" > 00:02:36,760< / a > Some people are shouting at something at a distance< / div >
< div > < a data-start = "163.76" href = "#" > 00:02:43,760< / a > It sounds like in a courtyard< / div >
< div > < a data-start = "166.54" href = "#" > 00:02:46,540< / a > A baby crying< / div >
< / div >
< / div > < / div >
< div class = "tooltip-wrap no-pinksecon" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "b3" controls src = "audio/description-alex2.mp3" class = "audio-tag" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
< div class = 'subB' >
< h3 > Alex< / h3 >
< div > < a data-start = "7.82" href = "#" > 00:00:07,820< / a > There is teenagers nearby and it's walking< / div >
< div > < a data-start = "11.7" href = "#" > 00:00:11,700< / a > Oh, there is water< / div >
< div > < a data-start = "15.24" href = "#" > 00:00:15,240< / a > That's running< / div >
< div > < a data-start = "20.66" href = "#" > 00:00:20,660< / a > Outside probably< / div >
< div > < a data-start = "28.88" href = "#" > 00:00:28,880< / a > Oh, that's... It sounds like there is something clapping or like hitting against a surface< / div >
< div > < a data-start = "38.52" href = "#" > 00:00:38,520< / a > And it's very repetitive sound< / div >
< div > < a data-start = "46.6" href = "#" > 00:00:46,600< / a > Oh, I can hear some, some radio or some music or broadcast< / div >
< div > < a data-start = "60.2" href = "#" > 00:01:00,200< / a > That was too short. I don't know [chuckling]< / div >
< div > < a data-start = "64.44" href = "#" > 00:01:04,440< / a > Oh, it's quite loud. It's... Maybe it's in some kind of transport< / div >
< div > < a data-start = "76.22" href = "#" > 00:01:16,220< / a > Oh, there is a child speaking< / div >
< div > < a data-start = "85.74" href = "#" > 00:01:25,740< / a > There are people talking outside... In a foreign language< / div >
< div > < a data-start = "96.28" href = "#" > 00:01:36,280< / a > It's not Dutch and there is some wind< / div >
< div > < a data-start = "102.32" href = "#" > 00:01:42,320< / a > There are more people talking< / div >
< div > < a data-start = "112.76" href = "#" > 00:01:52,760< / a > Oh, there is sounds like there are construction works< / div >
< div > < a data-start = "116.72" href = "#" > 00:01:56,720< / a > Or hammering< / div >
< div > < a data-start = "120.92" href = "#" > 00:02:00,920< / a > Oh, it's very loud. Oh [chuckling], it's applause or... a crowd of people. I don't know [chuckling]< / div >
< div > < a data-start = "132.06" href = "#" > 00:02:12,060< / a > It's inside. It sounds like a hallway... I don't know. Like inside< / div >
< div > < a data-start = "138.26" href = "#" > 00:02:18,260< / a > Because I hear some echoing< / div >
< div > < a data-start = "142.56" href = "#" > 00:02:22,560< / a > Ot it's inside a tunnel, where people are passing by< / div >
< div > < a data-start = "158.2" href = "#" > 00:02:38,200< / a > It sounds like near some street outside and I hear some kids in the background< / div >
< div > < a data-start = "166.6" href = "#" > 00:02:46,600< / a > Again, there is a child screaming or crying< / div >
< / div >
< / div > < / div >
< / div >
<!-- draggable menu -->
< div class = "draggable scaleable-wrapper menu" style = "top:130%;left: 5; width: 300px; font-size: 20px" >
< h2 > < a href = "diary.php" > Diary of West Rotterdam< / a > < / h2 >
< div class = "drag-content" >
(first experiments)
< / div >
< / div >
< div class = "draggable scaleable-wrapper menu" style = "top:75%; left: 1%;width: 250px; font-size: 16px" >
< h2 > < a href = "amplification.php" > Amplification of female voices< / a > < / h2 >
< div class = "drag-content" >
(workshops)
< / div >
< / div >
< div class = "draggable scaleable-wrapper menu" style = "top: 30%; right: 0.5%;width: 150px; font-size: 16px" >
< h2 > < a href = "index.php" > About< / a > < / h2 >
< div class = "drag-content" >
(main page)
< / div >
< / div >
< div class = "draggable scaleable-wrapper menu" style = "top: 5%; right: 1%; z-index: 9;width: 250px; font-size: 16px" >
< h2 > < a href = "thesis-angeliki.php" > "Let' s Talk About Unspeakable Things"< / a > < / h2 >
< div class = "drag-content" >
(thesis)
< / div >
< / div >
< div class = "draggable scaleable-wrapper menu" style = "top: 95%; left: 2%;" >
< h2 > < a href = "podcast4.php" > Podcast4< div class = "hover-icon" > < img src = "images/icon-play.png" > < / div > < / a > < / h2 >
< / div >
< div class = "draggable scaleable-wrapper menu" style = "top: 105%; left: 2%;" >
< h2 > < a href = "podcast1.php" > Podcast1< div class = "hover-icon" > < img src = "images/icon-play.png" > < / div > < / a > < / h2 >
< / div >
< div class = "draggable scaleable-wrapper menu" style = "top: 115%; left: 3%;" >
< h2 > < a href = "podcast2.php" > Podcast2< div class = "hover-icon" > < img src = "images/icon-play.png" > < / div > < / a > < / h2 >
< / div >
< div class = "draggable scaleable-wrapper menu" style = "top: 125%; left: 1%;" >
< h2 > < a href = "podcast3.php" > Podcast3< div class = "hover-icon" > < img src = "images/icon-play.png" > < / div > < / a > < / h2 >
< / div >
< div class = "draggable scaleable-wrapper active-draggable" style = "top: 1%; left: 1%;" >
< h2 > < a class = "active" href = "player.php" > Player< / a > < / h2 >
< div class = "drag-content" >
<?php include 'texts/player.txt' ; ?>
< / div >
< / div >
<!-- end draggable -->
< script type = "text/javascript" src = "js/main.js" > < / script >
< script >
var dialogueTimings = [0,8,16,28,33,50,77,120,136],
dialogues = document.querySelectorAll('#transcript>div'),
transcriptWrapper = document.querySelector('#transcriptWrapper'),
audio = document.querySelector('#a2'),
previousDialogueTime = -1;
function playTranscript() {
var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v < = audio.currentTime}));
if(previousDialogueTime !== currentDialogueTime) {
previousDialogueTime = currentDialogueTime;
var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];
transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50;
var previousDialogue = document.getElementsByClassName('speaking')[0];
if(previousDialogue !== undefined)
previousDialogue.className = previousDialogue.className.replace('speaking','');
currentDialogue.className +=' speaking';
}
}
;
var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
dialogues3 = document.querySelectorAll('#transcript3>div'),
transcriptWrapper3 = document.querySelector('#transcriptWrapper3'),
audio = document.querySelector('#a3'),
previousDialogueTime = -1;
function playTranscript3() {
var currentDialogueTime = Math.max.apply(Math, dialogueTimings3.filter(function(v){return v < = audio.currentTime}));
if(previousDialogueTime !== currentDialogueTime) {
previousDialogueTime = currentDialogueTime;
var currentDialogue = dialogues3[dialogueTimings3.indexOf(currentDialogueTime)];
transcriptWrapper3.scrollTop = currentDialogue.offsetTop - 50;
var previousDialogue = document.getElementsByClassName('speaking3')[0];
if(previousDialogue !== undefined)
previousDialogue.className = previousDialogue.className.replace('speaking3','');
currentDialogue.className +=' speaking3';
}
}
;
// players in circle
document.querySelectorAll( '.ciclegraph' ).forEach( ( ciclegraph )=>{
let circles = ciclegraph.querySelectorAll( '.circle' )
let angle = 360-90, dangle = 360 / circles.length
for( let i = 0; i < circles.length ; + + i ) {
let circle = circles[i]
angle += dangle
circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`
}
})
< / script >
< / body >
< / html >
