|
|
<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="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>
|
|
|
<title>Player</title>
|
|
|
<link rel="shortcut icon" href="images/speaker_logo.png" />
|
|
|
</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 @outside 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>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- draggable youtube links and other -->
|
|
|
<!-- sources -->
|
|
|
<div id="show1" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">×</span><iframe width="93%" 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">×</span><iframe width="93%" 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">×</span><iframe width="93%" 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">×</span><iframe width="93%" 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: 160%; left:0.2%">
|
|
|
<button id="but">listen</button>
|
|
|
First sample of city sounds related to public/private and speech and recordings of descriptions from different people
|
|
|
<div class="tooltip-wrap">
|
|
|
<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">
|
|
|
<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">
|
|
|
<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">
|
|
|
<!-- 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: 190%; left:0.2%">
|
|
|
<button id="butB">listen</button>
|
|
|
Second sample of city sounds related to public/private and speech and recordings of descriptions from different people
|
|
|
<div class="tooltip-wrap">
|
|
|
<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">
|
|
|
<!-- 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">
|
|
|
<!-- 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" style="top:130%;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" 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" 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" 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" style="top: 95%; left: 2%;">
|
|
|
<h2 ><a href="podcast4.php">Podcast4</a></h2>
|
|
|
</div>
|
|
|
|
|
|
<div class="draggable scaleable-wrapper" style="top: 105%; left: 2%;">
|
|
|
<h2 ><a href="podcast1.php">Podcast1</a></h2>
|
|
|
</div>
|
|
|
<div class="draggable scaleable-wrapper" style="top: 115%; left: 3%;">
|
|
|
<h2 ><a href="podcast2.php">Podcast2</a></h2>
|
|
|
</div>
|
|
|
<div class="draggable scaleable-wrapper" style="top: 125%; left: 1%;">
|
|
|
<h2 ><a href="podcast3.php">Podcast3</a></h2>
|
|
|
</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
|
|
|
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
|
|
|
circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`
|
|
|
}
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|