You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

774 lines
32 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="podcast1.php">Podcasts</a>
<!-- <div class="tooltip-wrap" align="center">
<p style="background-color: lightgrey;width: 200px;">Digital Utterance</p>
<div class="tooltip-content-down" style="max-width: 1000px;left: 50% !important;">
How can we engage politically with the exclusion of specific (female) voices from the public sphere through our own voice? Here I document my attempts to create a safe common space of discussing that topic in Leeszaal, that I consider a diverse public space, where we can explore our public voices in situ, and trying out vocal performances. I am doing that together with Christina Karagianni, who is also from Greece and with whom I share similar experiences of silencing. We combine our practices -her practice lies on choreography and mine on social interaction and sound- and try vocal exercises and reading in moments of Leeszaal. Structure of the meetings: reading extracts in random order, discuss peronal associations, warm up, say a personal sentence in any language, transcribe only the vowels, read back the vowels, sing all together the score of vowels.
</div>
</div>
-->
<div class="tab">
<button class="tablinks" style="position: absolute; right: 50%;" onclick="openCity(event, 'utterance')">Digital Utterance</button>
</div>
<div id="utterance" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
How can we engage politically with the exclusion of specific (female) voices from the public sphere through our own voice? Here I document my attempts to create a safe common space of discussing that topic in Leeszaal, that I consider a diverse public space, where we can explore our public voices in situ, and trying out vocal performances. I am doing that together with Christina Karagianni, who is also from Greece and with whom I share similar experiences of silencing. We combine our practices -her practice lies on choreography and mine on social interaction and sound- and try vocal exercises and reading in moments of Leeszaal.<div class="tooltip-wrap" style="display: inline;text-decoration:underline;">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>women from Leeszaal. Structure of the meetings: reading extracts in random order, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">discuss <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>personal associations and experiences with voice in public, warm up, say a personal sentence in any language, transcribe only the vowels, read back the vowels, sing all together the score of vowels.
</div>
</div>
<!-- internet resources -->
<!-- <div class="dropdown2" style="right: 0;">
<button onclick="myFunction2()" class="dropbtn2" style="width:140px;" >Internet sources</button>
<div id="myDropdown2" class="dropdown-content2">
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=HlvfPizooII" target="popup" onclick="window.open('https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be','popup','width=600,height=600'); return false;">Angela Davis @Occupy Wall Street</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be" target="popup" onclick="window.open('https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be','popup','width=600,height=600'); return false;">Judith Butler @Occupy Wall Street</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=SirOxIeuNDE" target="popup" onclick="window.open('https://www.youtube.com/watch?v=SirOxIeuNDE','popup','width=600,height=600'); return false;">Laurie Anderson - Mach 20</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.thisamericanlife.org/667/wartime-radio" target="popup" onclick="window.open('https://www.thisamericanlife.org/667/wartime-radio','popup','width=600,height=600'); return false;">Ballout, D. (2019) Good Morning, Kafranbel, This American Life: Wartime Radio</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=TY96Ma6YdtQ" target="popup" onclick="window.open('https://www.youtube.com/watch?v=TY96Ma6YdtQ','popup','width=600,height=600'); return false;">Vocal performance of Katalin Ladik in the film Berberian Sound Studio, 2012</a>
</li>
</div>
</div> -->
<div class="tabpink">
<button class="tablinks" style="position: absolute; right: 5%;" onclick="openCity(event, 'internet')">Internet Sources</button>
</div>
<div id="internet" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=HlvfPizooII" target="popup" onclick="window.open('https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be','popup','width=600,height=600'); return false;">Angela Davis @Occupy Wall Street</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be" target="popup" onclick="window.open('https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be','popup','width=600,height=600'); return false;">Judith Butler @Occupy Wall Street</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=SirOxIeuNDE" target="popup" onclick="window.open('https://www.youtube.com/watch?v=SirOxIeuNDE','popup','width=600,height=600'); return false;">Laurie Anderson - Mach 20</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.thisamericanlife.org/667/wartime-radio" target="popup" onclick="window.open('https://www.thisamericanlife.org/667/wartime-radio','popup','width=600,height=600'); return false;">Ballout, D. (2019) Good Morning, Kafranbel, This American Life: Wartime Radio</a>
</li>
<li style="list-style: none;">
<a class="internet" href="https://www.youtube.com/watch?v=TY96Ma6YdtQ" target="popup" onclick="window.open('https://www.youtube.com/watch?v=TY96Ma6YdtQ','popup','width=600,height=600'); return false;">Vocal performance of Katalin Ladik in the film Berberian Sound Studio, 2012</a>
</li></div>
</div>
<!-- recordings -->
<section>
<div style="position:absolute; top:15%; left:41%;">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>warming up @Leeszaal
</div>
<div class="tooltip-wrap" style="position:absolute; top:12%; left:51%;">
<audio controls src="audio/leeszaal-meetings-choir.mp3"></audio>singing vowels @Leeszaal
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/vowels-20190328-leeszaal.jpg" width="500px">
</div>
<!-- <div class="column"><img src="images/meeting-20190328-leeszaal-5.JPG" width="500px">
</div> -->
</div>
</div>
</div>
<div style="position:absolute; top:20%; left:63%;">
<audio controls src="audio/description-alex2.mp3"></audio>describing/annotating
</div>
<div class="tooltip-wrap" style="position:absolute; top:30%; left:70%;">
<audio controls src="audio/finearts-meeting-discussion.mp3"></audio>discussing about voice in public @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/meeting-20190329-finearts-1.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:42%; left:75%;">
<audio controls src="audio/leeszaal-meetings-transcribing.mp3"></audio>transcribing vowels @Leeszaal
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/meeting-20190328-leeszaal-1.JPG" width="500px" />
</div>
</div>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:55%; left:69%;">
<audio controls src="audio/finearts-meeting-choir.mp3"></audio>singing vowels @Fine Arts
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/vowels-20190329-finearts.jpg" width="500px" />
</div>
</div>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:65%; left:63%;">
<audio controls src=""></audio>
<div class="tooltip-content-up">
<table>
<tr>
</tr>
</table>
</div>
</div>
<div style="position:absolute; top:70%; left:53%;">
<audio controls src=""></audio>
</div>
<div style="position:absolute; top:57%; left:33%;;">
<audio controls src="audio/finearts-meeting-choirhigh.mp3"></audio>singing vowels (high) @Fine Arts
</div>
<div style="position:absolute; top:33%; left:26%;;">
<audio controls src=""></audio>
</div>
<div class="tooltip-wrap" style="position:absolute; top:46%; left:28%;">
<audio controls src="audio/leeszaal-meetings-discussion.mp3"></audio>discussing about voice in public @Leeszaal
<div class="tooltip-content-up">
<table>
<tr>
<td><img src="images/meeting-20190328-leeszaal-2.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
<div style="position:absolute; top:66%; left:41%;;">
<audio controls src="audio/finearts-meeting-warming.mp3"></audio>warming up @Fine Arts
</div>
<div class="tooltip-wrap" style="position:absolute; top:23%; left:32%;">
<audio controls src="audio/finearts-meeting-transcribing.mp3"></audio>transcribing vowels @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/meeting-20190329-finearts-2.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:27%; left:29%;">
<audio controls src="audio/finearts-meeting-extracts.mp3"></audio>reading extracts @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/carson-extract.jpg" width="500px" />
</td>
<td><img src="images/fresh1.jpg" width="500px" />
</td>
<td><img src="images/fresh2.jpg" width="500px" />
</td>
</tr>
</table>
</div>
</div>
</section>
<br>
<!-- soundwalk player -->
<section style="margin-top: 800px !important;">
<div class="tab">
<button class="tablinks" style="position: absolute; right: 50%;top: 80%" onclick="openCity(event, 'feedback')">Feedback Composition</button>
</div>
<div id="feedback" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
<p>I recorded sounds from West Rotterdam, while walking around a neighborhood for several days. This action was part of my first experiments when I was in attempt to understand how gender binaries regarding voice are reflected in space, especially public space.
</p>
<div class="row"><div class="column" style="padding-right: 120px;"><img width="290px" src="images/soundwalk-photo1.jpg" /></div><div class="column"><img width="290px" src="images/soundwalk-photo3.jpg" /></div></div>
</div>
</div>
<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>
<div class="container">
<div class="rowcircle">
<span>
<div class="tooltip-wrap">
<audio controls src="audio/finearts-meeting-discussion.mp3"></audio>discussing about voice in public @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/meeting-20190329-finearts-1.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
</span>
<span><audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>warming up @Leeszaal</audio></span>
</div>
<div class="rowcircle">
<span><audio controls src="audio/leeszaal-meetings-warming.mp3"></audio></span>
<span><audio controls src="audio/leeszaal-meetings-warming.mp3"></audio></span>
<span><audio controls src="audio/leeszaal-meetings-warming.mp3"></audio></span>
</div>
<div class="rowcircle">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
</div>
<div class="rowcircle">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
</div>
<div class="rowcircle">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
</div>
<section>
<div style="position:absolute; top:15%; left:41%;">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>warming up @Leeszaal
</div>
<div class="tooltip-wrap" style="position:absolute; top:12%; left:51%;">
<audio controls src="audio/leeszaal-meetings-choir.mp3"></audio>singing vowels @Leeszaal
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/vowels-20190328-leeszaal.jpg" width="500px">
</div>
<!-- <div class="column"><img src="images/meeting-20190328-leeszaal-5.JPG" width="500px">
</div> -->
</div>
</div>
</div>
<div style="position:absolute; top:20%; left:63%;">
<audio controls src="audio/description-alex2.mp3"></audio>describing/annotating
</div>
<div class="tooltip-wrap" style="position:absolute; top:30%; left:70%;">
<audio controls src="audio/finearts-meeting-discussion.mp3"></audio>discussing about voice in public @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/meeting-20190329-finearts-1.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:42%; left:75%;">
<audio controls src="audio/leeszaal-meetings-transcribing.mp3"></audio>transcribing vowels @Leeszaal
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/meeting-20190328-leeszaal-1.JPG" width="500px" />
</div>
</div>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:55%; left:69%;">
<audio controls src="audio/finearts-meeting-choir.mp3"></audio>singing vowels @Fine Arts
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/vowels-20190329-finearts.jpg" width="500px" />
</div>
</div>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:65%; left:63%;">
<audio controls src=""></audio>
<div class="tooltip-content-up">
<table>
<tr>
</tr>
</table>
</div>
</div>
<div style="position:absolute; top:70%; left:53%;">
<audio controls src=""></audio>
</div>
<div style="position:absolute; top:57%; left:33%;;">
<audio controls src="audio/finearts-meeting-choirhigh.mp3"></audio>singing vowels (high) @Fine Arts
</div>
<div style="position:absolute; top:33%; left:26%;;">
<audio controls src=""></audio>
</div>
<div class="tooltip-wrap" style="position:absolute; top:46%; left:28%;">
<audio controls src="audio/leeszaal-meetings-discussion.mp3"></audio>discussing about voice in public @Leeszaal
<div class="tooltip-content-up">
<table>
<tr>
<td><img src="images/meeting-20190328-leeszaal-2.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
<div style="position:absolute; top:66%; left:41%;;">
<audio controls src="audio/finearts-meeting-warming.mp3"></audio>warming up @Fine Arts
</div>
<div class="tooltip-wrap" style="position:absolute; top:23%; left:32%;">
<audio controls src="audio/finearts-meeting-transcribing.mp3"></audio>transcribing vowels @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/meeting-20190329-finearts-2.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
<div class="tooltip-wrap" style="position:absolute; top:27%; left:29%;">
<audio controls src="audio/finearts-meeting-extracts.mp3"></audio>reading extracts @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/carson-extract.jpg" width="500px" />
</td>
<td><img src="images/fresh1.jpg" width="500px" />
</td>
<td><img src="images/fresh2.jpg" width="500px" />
</td>
</tr>
</table>
</div>
</div>
</section>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}
// Close the dropdown if the user clicks outside of it
window.onclick2 = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show2')) {
openDropdown.classList.remove('show2');
}
}
}
}
</script>
<!-- scripts for the soundwalk player-->
<script>
var a1 = document.getElementById("a1"),
a2 = document.getElementById("a2"),
but = document.getElementById("but");
but.addEventListener("click", function () {
if (a1.paused) {
a1.play();
a2.play();
a3.play();
a4.play();
} else {
a1.pause();
a2.pause();
a3.pause();
a4.pause();
}
})
a1.addEventListener("play", function(){
but.innerHTML="pause"
})
a1.addEventListener("pause", function(){
but.innerHTML="listen"
})
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
a4.currentTime=t
e.preventDefault()
a1.play();
a2.play();
a3.play();
a4.play();
})
}
var interrupt = document.getElementById("interrupt");
butI = document.getElementById("butI");
butI.addEventListener("click", function () {
if (interrupt.paused) {
b1.pause();
b2.pause();
b3.pause();
a1.pause();
a2.pause();
a3.pause();
a4.pause();
interrupt.play();
} else {
interrupt.pause();
a1.play();
a2.play();
a3.play();
a4.play();
b1.play();
b2.play();
b3.play();
}
})
interrupt.addEventListener("play", function(){
butI.innerHTML="stop interrupt"
})
interrupt.addEventListener("pause", function(){
butI.innerHTML="interrupt"
})
</script>
<script>
var b1 = document.getElementById("b1"),
b2 = document.getElementById("b2"),
butB = document.getElementById("butB");
butB.addEventListener("click", function () {
if (b1.paused) {
b1.play();
b2.play();
b3.play();
} else {
b1.pause();
b2.pause();
b3.pause();
}
})
b1.addEventListener("play", function(){
butB.innerHTML="pause"
})
b1.addEventListener("pause", function(){
butB.innerHTML="listen"
})
var links=document.querySelectorAll("div.subB a")
for (var i=0, l=links.length; i<l; i++) {
var b = links[i];
b.addEventListener("click", function(e) {
console.log("CLICK", this);
var t=parseFloat(this.getAttribute("data-start"))
b1.currentTime=t
b2.currentTime=t
b3.currentTime=t
e.preventDefault()
b1.play();
b2.play();
b3.play();
})
}
</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';
}
}
;
</script>
<!-- scripts for tab button -->
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>