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.

419 lines
19 KiB
PHP

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">
<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/jquery.ui.touch-punch.min.js"></script>
<script src="js/main.js"></script>
<title>Player</title>
</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) Good Morning, Kafranbel, This American Life: Wartime Radio</a>
</li>
<li id="katalin">
<a href="#" >Vocal performance of Katalin Ladik in the film Berberian Sound Studio, 2012</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>
<a href="images/meeting-20190328-leeszaal-6.jpg" target="_blank">
<img src="images/meeting-20190328-leeszaal-6.jpg" width="270px">
</a>
<p>warming up @Leeszaal</p>
</div>
<div class="draggable" style="position:absolute; top:15%; left:41%; width: 270px">
<audio controls src="audio/leeszaal-meeting-extracts-20190523.mp3"></audio>
<a href="images/meeting-20190523-leeszaal-6.jpg" target="_blank">
<img src="images/meeting-20190523-leeszaal-6.jpg" width="270px">
</a>
<p>reading extracts @outside Leeszaal</p>
</div>
<div class="draggable" style="position:absolute; top:18%; left:37%; width: 270px">
<audio controls src="audio/leeszaal-meetings-choir.mp3"></audio>
<a href="images/vowels-20190328-leeszaal.jpg" target="_blank">
<img src="images/vowels-20190328-leeszaal.jpg" width="270px">
</a>
<p>singing vowels @outside 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>
<a href="images/meeting-20190523-leeszaal-7.jpg" target="_blank">
<img src="images/meeting-20190523-leeszaal-7.jpg" width="270px">
</a>
<p>warming up @outside Leeszaal</p>
</div>
<div class="draggable" style="position:absolute; top:25%; left:66%;width: 270px">
<audio controls src="audio/distort_leeszaal_20190523-1341.mp3" ></audio>
<a href="" target="_blank">
<img src="images/meeting-20190523-leeszaal-2.jpg" width="270px">
</a>
<p>personal experiences-distorted voice @outside Leeszaal</p>
</div>
<div class="draggable" style="position:absolute; top:30%; left:70%;width: 270px">
<audio controls src="audio/finearts-meeting-discussion.mp3"></audio>
<a href="" target="_blank"><img src="images/meeting-20190329-finearts-1.JPG" width="270px" /></a>
<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>
<a href="" target="_blank"><img src="images/meeting-20190328-leeszaal-1.JPG" width="270px" /></a>
<p>transcribing vowels @Leeszaal</p>
</div>
<div class="draggable" style="position:absolute; top:55%; left:73%;width: 270px">
<audio controls src="audio/finearts-meeting-choir.mp3"></audio>
<a href="" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="270px" /></a>
<p>singing vowels @Fine Arts</p>
</div>
<div class="draggable" style="position:absolute; top:65%; left:70%;width: 270px">
<audio controls src="audio/distort_leeszaal_20190523-1336.mp3" ></audio>
<a href="" target="_blank">
<img src="images/meeting-20190523-leeszaal-1.jpg" width="270px">
</a>
<p>singing vowels-distorted voice @outside Leeszaal</p>
</div>
<div class="draggable" style="position:absolute; top:23%; left:32%;width: 270px">
<audio controls src="audio/finearts-meeting-transcribing.mp3"></audio>
<a href="" target="_blank">
<img src="images/meeting-20190329-finearts-2.JPG" width="270px" />
</a>
<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>
<a href="images/carson-extract.jpg" target="_blank">
<img src="images/carson-extract.jpg" width="270px" />
</a>
<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>
<a href="images/meeting-20190523-leeszaal-4.jpg" target="_blank">
<img src="images/meeting-20190523-leeszaal-4.jpg" width="270px">
</a>
<p>transcribing vowels @outside Leeszaal</p>
</div>
<div class="draggable" style="position:absolute; top:46%; left:28%; width: 270px">
<audio controls src="audio/leeszaal-meetings-discussion.mp3"></audio>
<a href="" target="_blank">
<img src="images/meeting-20190328-leeszaal-2.JPG" width="270px" /></a>
<p>discussing about voice in public @Leeszaal </p>
</div>
<div class="draggable" style="position:absolute; top:57%; left:30%;width: 270px;">
<audio controls src="audio/finearts-meeting-choirhigh.mp3"></audio>
<a href="images/meeting-20190329-finearts-5.JPG" target="_blank"><img src="images/meeting-20190329-finearts-5.JPG" width="270px" /></a>
<p>singing vowels (high) @Fine Arts</p>
</div>
<div class="draggable" style="position:absolute; top:66%; left:32%;width: 270px;">
<audio controls src="audio/finearts-meeting-warming.mp3"></audio>
<a href="images/meeting-20190329-finearts-4.JPG" target="_blank"><img src="images/meeting-20190329-finearts-4.JPG" width="270px" /></a>
<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><a href="" target="_blank">
<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><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">
<audio ontimeupdate="playTranscript3()" style="width: 100%; background: #222;" id="a3" controls src="audio/description-eugenie-CUT-SHORT.mp3"></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">
<!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="a4" controls src="audio/description-alex1.mp3"></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>
<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><a href="" target="_blank">
<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><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">
<!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3"></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>
<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="">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.php">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.php">Player</a></h2>
<div class="drag-content">
<?php include 'texts/player.txt'; ?>
</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">About</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="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 970px; left: 100px;z-index: 1;">
<h2 ><a href="podcast4.php">Podcast4</a></h2>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 260px; left: 120px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 920px; left: 150px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 820px; left: 80px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2>
</div>
<!-- end draggable -->
</body>
</html>