Angeliki
/
eaiaiaiaoi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

changed titles of podcasts and added url of the project

Browse Source
master
angeliki 5 years ago
parent 5369e2f11d
commit 5b0ae621d6
6 changed files with 694 additions and 12 deletions
Show Stats Download Patch File Download Diff File

663
js/player.php
Unescape Escape View File

@ -0,0 +1,663 @@
<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="js/jquery-1.12.4.js"></script>
<script src="js/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 class="draggable-circle circle">
<audio controls src="audio/nexttoleeszaal-discussion-3-20190606.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190606-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190606-leeszaal-2.jpg" style="width:100%" /></a>
<p>Discussing on low/high voice @Next to Leeszaal 6/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/nexttoleeszaal-extracts-20190606.mp3" class="audio-tag"></audio>
<a href="images/extracts-leeszaal-20190606.jpg" target="_blank"><img src="images/extracts-leeszaal-20190606.jpg" style="width:100%" /></a>
<p>Reading extracts @Next to Leeszaal 6/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/nexttoleeszaal-warming-20190606.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190606-leeszaal-5.jpg" target="_blank"><img src="images/meeting-20190606-leeszaal-5.jpg" style="width:100%" /></a>
<p>Warming up @Next to Leeszaal 6/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/nexttoleeszaal-discussion-1-20190613.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190613-1.jpg" target="_blank"><img src="images/meeting-20190613-1.jpg" style="width:100%" /></a>
<p>Discussing about directness @Next to Leeszaal 13/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/nexttoleeszaal-discussion-2-20190613.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190613-2.jpg" target="_blank"><img src="images/meeting-20190613-2.jpg" style="width:100%" /></a>
<p>Discussing about metaphors of voice @Next to Leeszaal 13/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/nexttoleeszaal-play-20190613.mp3" class="audio-tag"></audio>
<a href="images/meeting-roles-20190613.jpg" target="_blank"><img src="images/meeting-roles-20190613.jpg" style="width:100%" /></a>
<p>Performing other voices @Next to Leeszaal 13/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/nexttoleeszaal-warming-20190613.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190613-2.jpg" target="_blank"><img src="images/meeting-20190613-2.jpg" style="width:100%" /></a>
<p>Warming up @Next to Leeszaal 13/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/nexttoleeszaal-discussion-20190620.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190602-1.jpg" target="_blank"><img src="images/meeting-20190602-1.jpg" style="width:100%" /></a>
<p>Discussing about angry voices @Next to Leeszaal 20/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/nexttoleeszaal-extracts-20190620.mp3" class="audio-tag"></audio>
<a href="images/extracts-20190620-1.jpg" target="_blank"><img src="images/extracts-20190620-1.jpg" style="width:100%" /></a>
<p>Reading extracts @Next to Leeszaal 20/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/nexttoleeszaal-warming-20190620.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190602-2.jpg" target="_blank"><img src="images/meeting-20190602-2.jpg" style="width:100%" /></a>
<p>Warming up @Next to Leeszaal 20/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/leeszaal-angry-20190627-1.mp3" class="audio-tag"></audio>
<a href="images/4-angry-sentences-20190627.jpg" target="_blank"><img src="images/4-angry-sentences-20190627.jpg" style="width:100%" /></a>
<p>Performing an 'angry' dialogue - 1st Part @Next to Leeszaal 27/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/leeszaal-angry-20190627-2.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190627-4.jpg" target="_blank"><img src="images/meeting-20190627-4.jpg" style="width:100%" /></a>
<p>Performing an 'angry' dialogue -2nd part @Next to Leeszaal 27/6</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/leeszaal-angry-20190704-1.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190704-1.jpg" target="_blank"><img src="images/meeting-20190704-1.jpg" style="width:100%" /></a>
<p>Performing an 'angry' dialogue -1st part @Next to Leeszaal 4/7</p>
</div>
<div class="draggable-circle circle">
<audio controls src="audio/leeszaal-angry-20190704-2.mp3" class="audio-tag"></audio>
<a href="images/3-angry-sentences-20190704.jpg" target="_blank"><img src="images/3-angry-sentences-20190704.jpg" style="width:100%" /></a>
<p>Performing an 'angry' dialogue -2nd part @Next to Leeszaal 4/7</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) ‘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>
</section>
<!-- soundwalk player -->
<div class="draggable full-width" style="top: 180%; left:0.2%">
<button id="but"><h3>listen</h3></button>
First sample of city sounds, related to public/private and speech, and recordings of people describing them
<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: 210%; left:0.2%">
<button id="butB"><h3>listen</h3></button>
Second sample of city sounds, related to public/private and speech, and recordings of people describing them
<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-pink">
<!-- 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:160%;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: 100%; left: 2%;">
<h2 ><a href="podcast1.php">"Mediating Speech"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
<div class="drag-content">
(podcast)
</div>
</div>
<div class="draggable scaleable-wrapper menu" style="top: 105%; left: 3%;">
<h2 ><a href="podcast2.php">"Voice's Transition"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
<div class="drag-content">
(podcast)
</div>
</div>
<div class="draggable scaleable-wrapper menu" style="top: 115%; left: 1%;">
<h2 ><a href="podcast3.php">"Blocking our Voices"<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
<div class="drag-content">
(podcast)
</div>
</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
function degrees_to_radians(degrees)
{
var pi = Math.PI;
return degrees * (pi/180);
}
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
let cx=ciclegraph.clientWidth / 2,
cy=400,
r=(ciclegraph.clientWidth / 2),
x=(Math.cos(degrees_to_radians(angle))*r)+cx,
y=(Math.sin(degrees_to_radians(angle))*r)+cy;
// circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`
circle.style.left=x+'px'
circle.style.top=y+'px'
}
})
</script>
</body>
</html>

5
podcast1.php
Unescape Escape View File

@ -126,10 +126,7 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
<div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre>
<br />
<br />
<br />
<h3>VISITORS' VOICES</h3><br />
<?php
$items=array();

3
podcast2.php
Unescape Escape View File

@ -126,9 +126,6 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
<div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre>
<br />
<br />
<br />
<h3>VISITORS' VOICES</h3>
<?php
$items=array();

4
podcast3.php
Unescape Escape View File

@ -124,9 +124,7 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
<div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre>
<br />
<br />
<br />
<h3>VISITORS' VOICES</h3>
<?php
$items=array();

6
texts/colophon.txt
Unescape Escape View File

@ -2,10 +2,12 @@
<li>This work has been produced in the context of the graduation research of Angeliki Diakrousi from the Experimental Publishing (<div class="tooltip-wrap">XPUB<div class="tooltip-content-right"><div>XPUB is a two year Master of Arts in Fine Art and Design that focuses on the intents, means and consequences of making things public and creating publics in the age of post-digital networks</div></div></div>) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.</li>
<li><a href="https://xpub.nl">https://xpub.nl</a></li>
<li>Special thanks to Christina Karagianni for organising together these inspiring workshops, Angelique, Fatima, Lidia, Dionne and other women from <div class="tooltip-wrap">Wereldvrouwen<div class="tooltip-content-right"><div>Wereldvrouwen Rotterdam Foundation does various social, educational and recreational activities for and by women from various cultures, many of them with a low income and low education level. One of their meeting points is at Leeszaal</div></div></div> for participating in the workshops, and all the other participants who came in the beginning, but also the online participants who generously contributed with their voices to the website. More thanks to my tutors, XPUB comrades and all my friends with whom I had interesting discussions and tryouts that pushed my research further.</li>
<li>This work is licensed under the <div class="tooltip-wrap">Free Art Licence<div class="tooltip-content-right"><div>[Angeliki Diakrousi, Let's Amplify Unspeakable Things, 2019. Rotterdam].<br>
Copyleft: This is a free work, you can copy, distribute, and modify it under the terms of the Free Art License <a href="http://artlibre.org/licence/lal/en/">http://artlibre.org/licence/lal/en/</a></div></div></div>.</li>
<li>The last 6 workshops are part of <div class="tooltip-wrap">Women@Art<div class="tooltip-content-right"><div>(free translation) Wereldvrouwen Rotterdam Foundation does various social, educational and recreational activities for and by women from various cultures, many of them with a low income and low education level. Most women hardly ever come into contact with the world of Art & Culture. Participants are encouraged to develop with inspiring examples from the art world by visiting exhibitions / studios in the city. A number of female (amateur) artists give workshops on their own work. The aim is to make the world of art more accessible, to help women to develop their own creativity and to transform it into strength</div></div></div> and funded by the <div class="tooltip-wrap">Municipality of Rotterdam<div class="tooltip-content-right"><div>The municipality granted to us a structural subsidy called Pitcher Perfect 010</div></div></div></li>
<li>The studies of Angeliki Diakrousi were funded through a scholarship by the <a href="https://www.onassis.org/">Onassis Foundation</a></li>
<li>This work is licensed under the <div class="tooltip-wrap">Free Art Licence<div class="tooltip-content-right"><div>[Angeliki Diakrousi, Let's Amplify Unspeakable Things, 2019. Rotterdam].<br>
Copyleft: This is a free work, you can copy, distribute, and modify it under the terms of the Free Art License <a href="http://artlibre.org/licence/lal/en/">http://artlibre.org/licence/lal/en/</a></div></div></div>.</li>
<li><a href="https://git.xpub.nl/Angeliki/eaiaiaiaoi">Source code</a> of the website</li>

25
url-eaiaiaiaoi.html
Unescape Escape View File

@ -0,0 +1,25 @@
<html lang="en">
<head>
<style type="text/css"></style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/draggable.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<body>
<div style="top:1500px;"><h1 style="text-align: center;font-size: 40px"><a style="color:red;text-decoration: none;" href="https://hub.xpub.nl/eaiaiaiaoi/">https://hub.xpub.nl/eaiaiaiaoi/</a></h1></div><br>
<div style="text-align: center; font-size: 24px">
<div>
Angeliki Diakrousi<br>
Let's Amplify Unspeakable Things<br>
2019 Rotterdam<br><br><br>
<audio style="width: 200px;" controls src="audio/one-combination-player.mp3" class="audio-tag"></audio>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="images/speaker_logo3.png" width="50px">
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save