< html lang = "en" >
< head >
< meta charset = "utf-8" >
< link href = "styles/stylesheet.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/main.js" > < / script >
< / head >
< body >
<!-- draggable youtube links and other -->
<!-- sources -->
< div id = "show1" class = "draggable" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < iframe width = "500px" height = "400px" 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" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < iframe width = "500" height = "400" 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" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < iframe width = "500" height = "400" 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" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < iframe width = "500" height = "400" 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" id = "box_metadata" style = "width: 500px !important" >
< 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 >
<!-- draggable audio tags/images -->
< section >
< div class = "draggable" style = "position:absolute; top:12%; left:51%;width: 270px" >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio > < p > warming up @Leeszaal< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:15%; left:41%; width: 270px" >
< audio controls src = "audio/leeszaal-meetings-choir.mp3" > < / audio >
< img src = "images/vowels-20190328-leeszaal.jpg" width = "270px" >
< p > singing vowels @Leeszaal< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:20%; left:63%;width: 270px" >
< audio controls src = "audio/leeszaal-meeting-warming-20190523.mp3" > < / audio > < p > warming up @Leeszaal< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:30%; left:70%;width: 270px" >
< audio controls src = "audio/finearts-meeting-discussion.mp3" > < / audio > < img src = "images/meeting-20190329-finearts-1.JPG" width = "270px" / >
< p > discussing about voice in public @Fine Arts< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:42%; left:75%;width: 270px" >
< audio controls src = "audio/leeszaal-meetings-transcribing.mp3" > < / audio > < img src = "images/meeting-20190328-leeszaal-1.JPG" width = "270px" / >
< p > transcribing vowels @Leeszaal< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:55%; left:69%;width: 270px" >
< audio controls src = "audio/finearts-meeting-choir.mp3" > < / audio > < img src = "images/vowels-20190329-finearts.jpg" width = "270px" / > < p > singing vowels @Fine Arts< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:65%; left:63%;width: 270px" >
< audio controls src = "audio/distort_leeszaal_20190523-1336.mp3" > < / audio >
< img src = "images/meeting-20190523-leeszaal-1.jpg" width = "270px" >
< p > singing vowels-distorted voice @Leeszaal< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:70%; left:53%;width: 270px" >
< audio controls src = "audio/distort_leeszaal_20190523-1341.mp3" > < / audio >
< img src = "images/meeting-20190523-leeszaal-2.jpg" width = "270px" >
< p > personal experiences-distorted voice @Leeszaal< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:23%; left:32%;width: 270px" >
< audio controls src = "audio/finearts-meeting-transcribing.mp3" > < / audio >
< img src = "images/meeting-20190329-finearts-2.JPG" width = "270px" / >
< p > transcribing vowels @Fine Arts< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:27%; left:29%; width: 270px" >
< audio controls src = "audio/finearts-meeting-extracts.mp3" > < / audio >
< img src = "images/carson-extract.jpg" width = "270px" / >
< p > reading extracts @Fine Arts< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:33%; left:26%;width: 270px;" >
< audio controls src = "audio/leeszaal-meeting-transcribing-20190523.mp3" > < / audio >
< img src = "images/meeting-20190523-leeszaal-4.jpg" width = "270px" >
< p > transcribing vowels @Leeszaal< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:46%; left:28%; width: 270px" >
< audio controls src = "audio/leeszaal-meetings-discussion.mp3" > < / audio >
< img src = "images/meeting-20190328-leeszaal-2.JPG" width = "270px" / >
< p > discussing about voice in public @Leeszaal < / p >
< / div >
< div class = "draggable" style = "position:absolute; top:57%; left:33%;width: 270px;" >
< audio controls src = "audio/finearts-meeting-choirhigh.mp3" > < / audio > < p > singing vowels (high) @Fine Arts< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:66%; left:41%;width: 270px;" >
< audio controls src = "audio/finearts-meeting-warming.mp3" > < / audio > < p > warming up @Fine Arts< / p >
< / div >
< / section >
< br >
<!-- soundwalk player -->
< section style = "margin-top: 1300px !important;" >
< div class = "tooltip-wrap" >
< audio style = "width: 100%;" id = "a1" controls src = "audio/selection-track-extracts-1.mp3" > < / audio >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
< div > selection of recordings while wandering around Leeszaal< / div >
< img src = "images/20190123-track-annotated.png" width = "100%" >
< / div >
< / div >
< div class = "tooltip-wrap" >
< audio ontimeupdate = "playTranscript()" style = "width: 100%; background: #222;" id = "a2" controls src = "audio/description-lidia-CUT.mp3" > < / audio >
< 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" >
< audio ontimeupdate = "playTranscript3()" style = "width: 100%; background: #222;" id = "a3" controls src = "audio/description-eugenie-CUT-SHORT.mp3" > < / audio >
< 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" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "a4" controls src = "audio/description-alex1.mp3" > < / audio >
< 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 >
< button id = "but" > listen< / button >
< br > < br >
<!-- second sounwalk player -->
< div class = "tooltip-wrap" >
< audio style = "width: 100%; background: #FFFFFF;" id = "b1" controls src = "audio/selectionB.mp3" > < / audio >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
< img src = "images/20190128-track-annotated.png" width = "100%" >
< / div >
< / div >
< div class = "tooltip-wrap" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "b2" controls src = "audio/description-tommi.mp3" > < / audio >
< 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" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "b3" controls src = "audio/description-alex2.mp3" > < / audio >
< 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 >
< button id = "butB" > listen< / button >
< / section >
<!-- draggable menu -->
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper" style = "top:70%;left: 5; width: 300px; font-size: 20px" >
< h2 > < a href = "player.html" target = "_blank" > Diary of West Rotterdam< / a > < / h2 >
< / div >
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper" style = "top:700px; right: 5px;width: 250px; font-size: 16px" >
< h2 > < a href = "amplification.html" target = "_blank" > Amplification of female voices< / a > < / h2 >
< / div >
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper" style = "top: 316.833px; left: 10;" >
< h2 > < a href = "player.html" target = "_blank" > Player< / a > < / h2 >
< div class = "drag-content" > The player is an audio collection of voices and sounds from the meetings I have co-organised, references from my research, various internet sources, and soundwalks that I have done. It is a digital utterance that intends to be a reminder to the first forms of excluded female vocal expressions. I am using this material in my podcasts by mixing and overlayering them and creating a form of narrative with my own voice. < / div >
< / div >
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper" style = "top: 200px; right: 0px;width: 150px; font-size: 16px" >
< h2 > < a href = "index.php" target = "_blank" > About< / a > < / h2 >
< / div >
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper" style = "top: 100px; right: 5px; width: 150px; font-size: 16px" >
< h2 > < a href = "podcast1.php" target = "_blank" > Podcasts< / a > < / h2 >
< / div >
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper" style = "top: 400px; right: 0px; z-index: 9;width: 250px; font-size: 16px" >
< h2 > < a href = "texts/thesis/thesis-angeliki.html" target = "_blank" > "Let' s Talk About Unspeakable Things"< / a > < / h2 >
< / div >
<!-- end draggable -->
< / body >
< / html >
