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.

540 lines
21 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>
<div class="short-description">
<p>
<a href="../index.php">Utterance</a>
</p>
</div>
<!-- internet resources -->
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">Internet sources</button>
<div id="myDropdown2" class="dropdown-content2">
<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=HlvfPizooII','popup','width=600,height=600'); return false;">Angela Davis @Occupy</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/selectionB.mp3"></audio>city sounds
<div class="tooltip-content-up">
<table>
<tr>
<td><img src="images/soundwalk-photo1.jpg" width="300px" />
</td>
<td><img src="images/soundwalk-photo3.jpg" width="300px" />
</td>
</tr>
</table>
</div>
</div>
<div style="position:absolute; top:70%; left:53%;">
<audio controls src="audio/description-eugenie-CUT-SHORT.mp3"></audio>describing/annotating
</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/description-lidia-CUT.mp3"></audio>describing/annotating
</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: 700px !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>
<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>
</body>
</html>