Angeliki
/
eaiaiaiaoi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
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.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e985b465eb'
${ noResults }
eaiaiaiaoi/player.php

539 lines
26 KiB
PHP
Raw Blame History Unescape Escape

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/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 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 box_metadata" style="top: 110%; left:40%; 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>
<!-- draggable audio tags/images -->
<div class="draggable" style="position:absolute; top:6%; left:51%;width: 13%">
<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" style="position:absolute; top:10%; left:48%;width: 13%">
<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" style="position:absolute; top:16%; left:55%;width: 13%">
<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" style="position:absolute; top:15%; left:41%; width: 13%">
<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" style="position:absolute; top:18%; left:37%; width: 13%">
<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" style="position:absolute; top:20%; left:63%;width: 13%">
<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" style="position:absolute; top:23%; left:66%;width: 13%">
<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" style="position:absolute; top:27%; left:68%;width: 13%">
<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" style="position:absolute; top:32%; left:70%;width: 13%">
<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" style="position:absolute; top:36%; left:73%;width: 13%">
<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" style="position:absolute; top:42%; left:75%;width: 13%">
<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" style="position:absolute; top:47%; left:74%;width: 13%">
<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" style="position:absolute; top:55%; left:73%;width: 13%">
<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" style="position:absolute; top:59%; left:71%;width: 13%">
<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" style="position:absolute; top:65%; left:70%;width: 13%">
<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" style="position:absolute; top:23%; left:32%;width: 13%">
<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" style="position:absolute; top:27%; left:29%; width: 13%">
<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" style="position:absolute; top:33%; left:26%;width: 13%;">
<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" style="position:absolute; top:38%; left:27%;width: 13%;">
<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" style="position:absolute; top:46%; left:28%; width: 13%">
<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" style="position:absolute; top:51%; left:29%; width: 13%">
<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" style="position:absolute; top:57%; left:30%;width: 13%;">
<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" style="position:absolute; top:61%; left:32%;width: 13%;">
<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" style="position:absolute; top:66%; left:35%;width: 13%;">
<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>
</section>
<br>
<!-- soundwalk player -->
<div class="draggable full-width" style="top: 140%; left:0.2%">
<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>
<button id="but">listen</button>
</div>
<br><br>
<div class="draggable full-width" style="top: 170%; left:0.2%">
<!-- second sounwalk player -->
<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>
<button id="butB">listen</button>
</div>
<!-- draggable menu-->
<div class="draggable scaleable-wrapper" style="top:110%;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:45%; 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: 200px; right: 0px;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: 65%; left: 2%;">
<h2 ><a href="podcast4.php">Podcast4</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 75%; left: 2%;">
<h2 ><a href="podcast1.php">Podcast1</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 85%; left: 3%;">
<h2 ><a href="podcast2.php">Podcast2</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 95%; 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';
}
}
;
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink