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

fixed javascript issue and footnotes in thesis

Browse Source
master
Angeliki 6 years ago
parent 04691ea8c5
commit f131757264
11 changed files with 262 additions and 185 deletions
Show Stats Download Patch File Download Diff File

82
amplification.php
Unescape Escape View File

@ -20,36 +20,39 @@
<!-- draggable archive --> <!-- draggable archive -->
<!-- div vowels --> <!-- div vowels -->
<div>
<div id="resize" class="draggable ui-draggable-handle" style="top: 6px; left: 1038px; line-height: 0 !important;"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></div>
<div id="resize" class="draggable ui-draggable-handle" style="top: 47px; left: 1083px;line-height: 0 !important;"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></div> <div id="resize" class="draggable ui-draggable-handle" style="top: 6px; left: 1038px; line-height: 0 !important;"><a href="images/vowels-leeszaal-test.jpg"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></a></div>
<div id="resize" class="draggable ui-draggable-handle" style="top: 81px; left: 1137px; line-height: 0 !important;"><img src="images/vowels-20190328-leeszaal.jpg" width="400px"></img></div> <div id="resize" class="draggable ui-draggable-handle" style="top: 47px; left: 1083px;line-height: 0 !important;"><a href="images/vowels-20190322-leeszaal.jpg"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 116px; left: 1176px;"><img src="images/vowels-20190329-finearts.jpg" width="400px"></img></div> <div id="resize" class="draggable ui-draggable-handle" style="top: 81px; left: 1137px; line-height: 0 !important;"><a href="images/vowels-20190328-leeszaal.jpg"><img src="images/vowels-20190328-leeszaal.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 156px; left: 1216px;"><img src="images/vowels-20190508-leeszaal-1.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 116px; left: 1176px;"><a href="images/vowels-20190329-finearts.jpg" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="400px"></img></a></div>
</div>
<div id="img" class="draggable ui-draggable-handle" style="top: 196px; left: 1256px;"><img src="images/vowels-20190508-leeszaal-2.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 156px; left: 1216px;"><a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-1.jpg" width="400px"></img></a></div>
</div>
<div id="img" class="draggable ui-draggable-handle" style="top: 236px; left: 1296px;"><img src="images/vowels-20190508-leeszaal-3.jpg" width="400px"></img></div>
</div>
<div id="img" class="draggable ui-draggable-handle" style="top: 276px; left: 1336px;"><img src="images/vowels-20190508-leeszaal-4.jpg" width="400px"></img></div>
</div>
<div id="img" class="draggable ui-draggable-handle" style="top: 316px; left: 1376px;"><img src="images/vowels-20190508-leeszaal-5.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 196px; left: 1256px;"><a href="images/vowels-20190508-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-2.jpg" width="400px"></img></a></div>
</div>
<div id="img" class="draggable ui-draggable-handle" style="top: 236px; left: 1296px;"><a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-3.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 276px; left: 1336px;"><a href="images/vowels-20190508-leeszaal-4.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-4.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 316px; left: 1376px;"><a href="images/vowels-20190508-leeszaal-5.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-5.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 356px; left: 1416px;"><a href="images/vowels-20190523-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-1.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 396px; left: 1456px;"><a href="images/vowels-20190523-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-2.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 436px; left: 1496px;"><a href="images/vowels-20190530-leeszaal.jpg" target="_blank"><img src="images/vowels-20190530-leeszaal.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 356px; left: 1416px;"><img src="images/vowels-20190523-leeszaal-1.jpg" width="400px"></img></div>
</div>
<div id="img" class="draggable ui-draggable-handle" style="top: 396px; left: 1456px;"><img src="images/vowels-20190523-leeszaal-2.jpg" width="400px"></img></div>
</div>
</div>
<!-- div extracts --> <!-- div extracts -->
<div> <div>
@ -60,7 +63,7 @@
<div class="draggable ui-draggable-handle" style="top: 1500px; left: 1100px; line-height: 0 !important;"><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a></div> <div class="draggable ui-draggable-handle" style="top: 1500px; left: 1100px; line-height: 0 !important;"><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a></div>
</div> </div>
<!-- div images -->
<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 406px;"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 406px;"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 306px;"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 306px;"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div>
@ -83,59 +86,54 @@
<div id="img" class="draggable ui-draggable-handle" style="top: 237px; left: 306px;"><img src="images/meeting-20190523-leeszaal-3.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 237px; left: 306px;"><img src="images/meeting-20190523-leeszaal-3.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 310px; left: 560px;"><a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-1.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 200px; left: 446px;"><img src="images/meeting-20190523-leeszaal-4.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 200px; left: 446px;"><img src="images/meeting-20190523-leeszaal-4.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 600px; left: 520px;"><img src="images/meeting-20190523-leeszaal-5.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 600px; left: 520px;"><img src="images/meeting-20190523-leeszaal-5.jpg" width="400px"></img></div>
<!-- <div id="img"> <div id="img" class="draggable ui-draggable-handle" style="top: 410px; left: 430px;"><a href="images/meeting-20190508_leeszaal.jpg" target="_blank"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></a></div>
<table style="margin-top:1181px !important; margin-left: 10% !important; padding: 20px;box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5); background-color: #E4E1E1;">
<tr> <div id="img" class="draggable ui-draggable-handle" style="top: 440px; left: 200px;"><a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" width="400px"></img></a></div>
<td><a href="images/carson-extract.jpg" target="_blank"><img src="images/carson-extract.jpg" width="550px" /></a>
</td>
<td><a href="images/fresh1.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a>
</td>
<td><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a>
</td>
</tr>
</table>
</div> -->
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="width: 500px; top: 20px; right: 0px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="width: 500px; top: 20px; right: 0px;">
<h2><a href="amplification.php">Amplification of female voices</a></h2> <h2><a href="amplification.php">Amplification of female voices</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/amplification.txt'; ?> <?php include 'texts/amplification.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable" style="top: 1270px; right: 200px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1270px; right: 200px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="">Diary of West Rotterdam</a></h2>
</div> </div>
<div class="draggable" style="top: 1000px; right: 10px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1200px; right: 10px;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
</div> </div>
<div class="draggable" style="top: 800px; right: 335px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 860px; right: 335px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
</div> </div>
<div class="draggable" style="top: 970px; left: 100px;z-index: 1;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable" style="top: 420px; left: 10px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 920px; left: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable" style="top: 1220px; left: 150px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1420px; left: 150px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable" style="top: 820px; left: 80px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1320px; left: 380px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable" style="top: 900px; right: 430px; z-index: 9;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 960px; right: 430px; z-index: 9;">
<h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
</div> </div>

6
index.php
Unescape Escape View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:3%;left:75%; width: 500px; font-size: 24px"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:3%;left:72%; width: 500px; font-size: 20px">
<h2 style="font-size: 36px;"><a href="amplification.php" >Amplification of female voices</a></h2> <h2 style="font-size: 36px;"><a href="amplification.php" >Amplification of female voices</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/amplification.txt'; ?> <?php include 'texts/amplification.txt'; ?>
@ -82,14 +82,14 @@
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:18%;left:6%;width: 800px; font-size: 28px" > <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:18%;left:6%;width: 800px; font-size: 24px" >
<h2 style="font-size: 44px"><a href="index.php" >About</a></h2> <h2 style="font-size: 44px"><a href="index.php" >About</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/about.txt'; ?> <?php include 'texts/about.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:67%;left:25%;" > <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:64%;left:25%;" >
<h2 ><a href="thesis-angeliki.php" >"Let's Talk About Unspeakable Things"</a></h2> <h2 ><a href="thesis-angeliki.php" >"Let's Talk About Unspeakable Things"</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/thesis-summary.txt'; ?> <?php include 'texts/thesis-summary.txt'; ?>

94
js/main.js
Unescape Escape View File

@ -1,6 +1,7 @@
// designed by Angeliki Diakrousi // designed by Angeliki Diakrousi
// scripts for tab button // scripts for tab button
function openCity(evt, cityName) { function openCity(evt, cityName) {
var i, tabcontent, tablinks; var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent"); tabcontent = document.getElementsByClassName("tabcontent");
@ -16,6 +17,32 @@
} }
// dropdown menu
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}
// Close the dropdown if the user clicks outside of it
window.onclick2 = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show2')) {
openDropdown.classList.remove('show2');
}
}
}
};
// for thesis
// var socket = new WebSocket(`wss://hypothes.is/ws?access_token=${'6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik'}`)
// <!-- scripts for the soundwalk player--> // <!-- scripts for the soundwalk player-->
var a1 = document.getElementById("a1"), var a1 = document.getElementById("a1"),
a2 = document.getElementById("a2"), a2 = document.getElementById("a2"),
@ -140,71 +167,4 @@ for (var i=0, l=links.length; i<l; i++) {
} }
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';
}
}
;
// dropdown menu
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}
// Close the dropdown if the user clicks outside of it
window.onclick2 = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show2')) {
openDropdown.classList.remove('show2');
}
}
}
};
// for thesis
// var socket = new WebSocket(`wss://hypothes.is/ws?access_token=${'6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik'}`)

220
player.php
Unescape Escape View File

@ -6,8 +6,8 @@
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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/draggable.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script> <script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/main.js"></script>
<title>Player</title> <title>Player</title>
<link rel="shortcut icon" href="images/speaker_logo.png" />
</head> </head>
@ -80,12 +80,28 @@ $("#katalin").click(function(){
<section> <section>
<div class="draggable" style="position:absolute; top:12%; left:51%;width: 270px"> <div class="draggable" style="position:absolute; top:6%; left:51%;width: 270px">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio> <audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<a href="images/meeting-20190328-leeszaal-6.jpg" target="_blank"> <a href="images/meeting-20190328-leeszaal-6.jpg" target="_blank">
<img src="images/meeting-20190328-leeszaal-6.jpg" width="270px"> <img src="images/meeting-20190328-leeszaal-6.jpg" width="270px">
</a> </a>
<p>warming up @Leeszaal</p> <p>warming up @Leeszaal 28/3</p>
</div>
<div class="draggable" style="position:absolute; top:10%; left:48%;width: 270px">
<audio controls src="audio/leeszaal-discussing-20190530.mp3"></audio>
<a href="images/meeting-20190530-leeszaal-4.jpg" target="_blank">
<img src="images/meeting-20190530-leeszaal-4.jpg" width="270px">
</a>
<p>discussing about voice in public @Leeszaal 30/5</p>
</div>
<div class="draggable" style="position:absolute; top:16%; left:55%;width: 270px">
<audio controls src="audio/leeszaal-meeting-transcribing-20190508.mp3"></audio>
<a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank">
<img src="images/vowels-20190508-leeszaal-3.jpg" width="270px">
</a>
<p>trascribing+singing vowels @Leeszaal 3/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:15%; left:41%; width: 270px"> <div class="draggable" style="position:absolute; top:15%; left:41%; width: 270px">
@ -93,7 +109,7 @@ $("#katalin").click(function(){
<a href="images/meeting-20190523-leeszaal-6.jpg" target="_blank"> <a href="images/meeting-20190523-leeszaal-6.jpg" target="_blank">
<img src="images/meeting-20190523-leeszaal-6.jpg" width="270px"> <img src="images/meeting-20190523-leeszaal-6.jpg" width="270px">
</a> </a>
<p>reading extracts @outside Leeszaal</p> <p>reading extracts @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:18%; left:37%; width: 270px"> <div class="draggable" style="position:absolute; top:18%; left:37%; width: 270px">
@ -101,7 +117,7 @@ $("#katalin").click(function(){
<a href="images/vowels-20190328-leeszaal.jpg" target="_blank"> <a href="images/vowels-20190328-leeszaal.jpg" target="_blank">
<img src="images/vowels-20190328-leeszaal.jpg" width="270px"> <img src="images/vowels-20190328-leeszaal.jpg" width="270px">
</a> </a>
<p>singing vowels @outside Leeszaal</p> <p>singing vowels @outside Leeszaal 28/3</p>
</div> </div>
@ -111,89 +127,140 @@ $("#katalin").click(function(){
<img src="images/meeting-20190523-leeszaal-7.jpg" width="270px"> <img src="images/meeting-20190523-leeszaal-7.jpg" width="270px">
</a> </a>
<p>warming up @outside Leeszaal</p> <p>warming up @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:25%; left:66%;width: 270px"> <div class="draggable" style="position:absolute; top:23%; left:66%;width: 270px">
<audio controls src="audio/distort_leeszaal_20190523-1341.mp3" ></audio> <audio controls src="audio/distort_leeszaal_20190523-1341.mp3" ></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190523-leeszaal-2.jpg" width="270px"> <img src="images/meeting-20190523-leeszaal-2.jpg" width="270px">
</a> </a>
<p>personal experiences-distorted voice @outside Leeszaal</p> <p>personal experiences-distorted voice @outside Leeszaal 23/5</p>
</div>
<div class="draggable" style="position:absolute; top:27%; left:68%;width: 270px">
<audio controls src="audio/leeszaal-extracts-20190530.mp3" ></audio>
<a href="images/fresh1.jpg" target="_blank">
<img src="images/fresh1.jpg" width="270px">
</a>
<p>reading extracts @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:30%; left:70%;width: 270px"> <div class="draggable" style="position:absolute; top:32%; left:70%;width: 270px">
<audio controls src="audio/finearts-meeting-discussion.mp3"></audio> <audio controls src="audio/finearts-meeting-discussion.mp3"></audio>
<a href="" target="_blank"><img src="images/meeting-20190329-finearts-1.JPG" width="270px" /></a> <a href="" target="_blank"><img src="images/meeting-20190329-finearts-1.JPG" width="270px" /></a>
<p>discussing about voice in public @Fine Arts</p> <p>discussing about voice in public @Fine Arts 29/3</p>
</div>
<div class="draggable" style="position:absolute; top:36%; left:73%;width: 270px">
<audio controls src="audio/leeszaal-meeting-warming-20190508.mp3"></audio>
<a href="" target="_blank"><img src="images/meeting-20190508_leeszaal.jpg" width="270px" /></a>
<p>warming up @Leeszaal 8/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:42%; left:75%;width: 270px"> <div class="draggable" style="position:absolute; top:42%; left:75%;width: 270px">
<audio controls src="audio/leeszaal-meetings-transcribing.mp3"></audio> <audio controls src="audio/leeszaal-meetings-transcribing.mp3"></audio>
<a href="" target="_blank"><img src="images/meeting-20190328-leeszaal-1.JPG" width="270px" /></a> <a href="" target="_blank"><img src="images/meeting-20190328-leeszaal-1.JPG" width="270px" /></a>
<p>transcribing vowels @Leeszaal</p> <p>transcribing vowels @Leeszaal 28/3</p>
</div>
<div class="draggable" style="position:absolute; top:47%; left:74%;width: 270px">
<audio controls src="audio/leeszaal-warming-20190530.mp3"></audio>
<a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" width="270px" /></a>
<p>warming up @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:55%; left:73%;width: 270px"> <div class="draggable" style="position:absolute; top:55%; left:73%;width: 270px">
<audio controls src="audio/finearts-meeting-choir.mp3"></audio> <audio controls src="audio/finearts-meeting-choir.mp3"></audio>
<a href="" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="270px" /></a> <a href="" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="270px" /></a>
<p>singing vowels @Fine Arts</p> <p>singing vowels @Fine Arts 29/3</p>
</div>
<div class="draggable" style="position:absolute; top:59%; left:71%;width: 270px">
<audio controls src="audio/leeszaal-coffee-20190530.mp3"></audio>
<a href="images/meeting-20190530-leeszaal-3.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-3.jpg" width="270px" /></a>
<p>coffee time @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:65%; left:70%;width: 270px"> <div class="draggable" style="position:absolute; top:65%; left:70%;width: 270px">
<audio controls src="audio/distort_leeszaal_20190523-1336.mp3" ></audio> <audio controls src="audio/distort_leeszaal_20190523-1336.mp3" ></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190523-leeszaal-1.jpg" width="270px"> <img src="images/meeting-20190523-leeszaal-1.jpg" width="270px">
</a> </a>
<p>singing vowels-distorted voice @outside Leeszaal</p> <p>singing vowels-distorted voice @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:23%; left:32%;width: 270px"> <div class="draggable" style="position:absolute; top:23%; left:32%;width: 270px">
<audio controls src="audio/finearts-meeting-transcribing.mp3"></audio> <audio controls src="audio/finearts-meeting-transcribing.mp3"></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190329-finearts-2.JPG" width="270px" /> <img src="images/meeting-20190329-finearts-2.JPG" width="270px" />
</a> </a>
<p>transcribing vowels @Fine Arts</p> <p>transcribing vowels @Fine Arts 29/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:27%; left:29%; width: 270px"> <div class="draggable" style="position:absolute; top:27%; left:29%; width: 270px">
<audio controls src="audio/finearts-meeting-extracts.mp3"></audio> <audio controls src="audio/finearts-meeting-extracts.mp3"></audio>
<a href="images/carson-extract.jpg" target="_blank"> <a href="images/carson-extract.jpg" target="_blank">
<img src="images/carson-extract.jpg" width="270px" /> <img src="images/carson-extract.jpg" width="270px" />
</a> </a>
<p>reading extracts @Fine Arts</p> <p>reading extracts @Fine Arts 29/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:33%; left:26%;width: 270px;"> <div class="draggable" style="position:absolute; top:33%; left:26%;width: 270px;">
<audio controls src="audio/leeszaal-meeting-transcribing-20190523.mp3"></audio> <audio controls src="audio/leeszaal-meeting-transcribing-20190523.mp3"></audio>
<a href="images/meeting-20190523-leeszaal-4.jpg" target="_blank"> <a href="images/meeting-20190523-leeszaal-4.jpg" target="_blank">
<img src="images/meeting-20190523-leeszaal-4.jpg" width="270px"> <img src="images/meeting-20190523-leeszaal-4.jpg" width="270px">
</a>
<p>transcribing vowels @outside Leeszaal 23/5</p>
</div>
<div class="draggable" style="position:absolute; top:38%; left:27%;width: 270px;">
<audio controls src="audio/leeszaal-sentenses-distorted-20190530.mp3"></audio>
<a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank">
<img src="images/meeting-20190530-leeszaal-1.jpg" width="270px">
</a> </a>
<p>transcribing vowels @outside Leeszaal</p> <p>statements- distorted voice @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:46%; left:28%; width: 270px"> <div class="draggable" style="position:absolute; top:46%; left:28%; width: 270px">
<audio controls src="audio/leeszaal-meetings-discussion.mp3"></audio> <audio controls src="audio/leeszaal-meetings-discussion.mp3"></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190328-leeszaal-2.JPG" width="270px" /></a> <img src="images/meeting-20190328-leeszaal-2.JPG" width="270px" /></a>
<p>discussing about voice in public @Leeszaal </p> <p>discussing about voice in public @Leeszaal 28/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:51%; left:29%; width: 270px">
<audio controls src="audio/leeszaal-singing-distorted-20190530.mp3"></audio>
<a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank">
<img src="images/vowels-20190508-leeszaal-1.jpg" width="270px" /></a>
<p>singing vowels- distorted voice @Leeszaal 30/5</p>
</div>
<div class="draggable" style="position:absolute; top:57%; left:30%;width: 270px;"> <div class="draggable" style="position:absolute; top:57%; left:30%;width: 270px;">
<audio controls src="audio/finearts-meeting-choirhigh.mp3"></audio> <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> <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> <p>singing vowels (high) @Fine Arts 29/3</p>
</div>
<div class="draggable" style="position:absolute; top:61%; left:32%;width: 270px;">
<audio controls src="audio/leeszaal-meeting-extracts-20190508.mp3"></audio>
<a href="images/meeting-20190328-leeszaal-4.jpg" target="_blank"><img src="images/meeting-20190328-leeszaal-4.jpg" width="270px" /></a>
<p>reading extracts @Leeszaal 8/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:66%; left:32%;width: 270px;"> <div class="draggable" style="position:absolute; top:66%; left:35%;width: 270px;">
<audio controls src="audio/finearts-meeting-warming.mp3"></audio> <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> <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> <p>warming up @Fine Arts 29/3</p>
</div> </div>
@ -208,16 +275,15 @@ $("#katalin").click(function(){
<section style="margin-top: 1300px !important;"> <section style="margin-top: 1300px !important;">
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3"></audio><a href="" target="_blank"> <audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div>selection of recordings while wandering around Leeszaal</div> <div>selection of recordings while wandering around Leeszaal</div>
<img src="images/20190123-track-annotated.png" width="100%"> </div>
</div>
</div> </div>
<div class="tooltip-wrap"> <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"> <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 class="tooltip-content-up">
<div id="transcriptWrapper" class='sub'> <div id="transcriptWrapper" class='sub'>
<h3>Lidia</h3> <h3>Lidia</h3>
@ -236,7 +302,7 @@ $("#katalin").click(function(){
<div class="tooltip-wrap"> <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"> <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 class="tooltip-content-up">
<div id="transcriptWrapper3" class='sub'> <div id="transcriptWrapper3" class='sub'>
<h3>Eugenie</h3> <h3>Eugenie</h3>
@ -258,10 +324,10 @@ $("#katalin").click(function(){
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="a4" controls src="audio/description-alex1.mp3"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #222;" id="a4" controls src="audio/description-alex1.mp3"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div class='sub'> <div class='sub'>
<h3>Alex</h3> <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="11.74" href="#">00:00:11,740</a> Em... I hear... It sounds like walking and it's quite windy outside</div>
@ -291,18 +357,17 @@ Oh, I hear children in the background crying</div>
<!-- second sounwalk player --> <!-- second sounwalk player -->
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<img src="images/20190128-track-annotated.png" width="100%"> </div>
</div>
</div> </div>
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="b2" controls src="audio/description-tommi.mp3"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #222;" id="b2" controls src="audio/description-tommi.mp3"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div class='subB'> <div class='subB'>
<h3>Tommi</h3> <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="12.98" href="#">00:00:12,980</a> This is some water ** maybe from a fountain</div>
@ -327,10 +392,10 @@ Oh, I hear children in the background crying</div>
</div></div> </div></div>
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div class='subB'> <div class='subB'>
<h3>Alex</h3> <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="7.82" href="#">00:00:07,820</a> There is teenagers nearby and it's walking</div>
@ -409,8 +474,53 @@ Oh, I hear children in the background crying</div>
<!-- end draggable --> <!-- 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> </body>

3
podcast1.php
Unescape Escape View File

@ -5,11 +5,11 @@
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<title>Podcast1</title> <title>Podcast1</title>
<link rel="shortcut icon" href="images/headphones_logo.png" />
</head> </head>
<body> <body>
<!-- draggable --> <!-- draggable -->
<br><br> <br><br>
<h3 id="box-title" style="width: 200px; left: 45%; position: absolute;"> <h3 id="box-title" style="width: 200px; left: 45%; position: absolute;">
@ -55,6 +55,7 @@
<br><br><br><br><br><br> <br><br><br><br><br><br>
<table><tr> <table><tr>
<td><img src="images/headphones_logo.png" width="40px"></td>
<?php <?php
$files = glob("podcasts/podcast1/*.mp3"); $files = glob("podcasts/podcast1/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)

2
podcast2.php
Unescape Escape View File

@ -5,6 +5,7 @@
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<title>Podcast2</title> <title>Podcast2</title>
<link rel="shortcut icon" href="images/headphones_logo.png" />
</head> </head>
<body> <body>
@ -55,6 +56,7 @@
<br><br><br><br><br><br> <br><br><br><br><br><br>
<table><tr> <table><tr>
<td><img src="images/headphones_logo.png" width="40px"></td>
<?php <?php
$files = glob("podcasts/podcast2/*.mp3"); $files = glob("podcasts/podcast2/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)

2
podcast3.php
Unescape Escape View File

@ -5,6 +5,7 @@
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<title>Podcast3</title> <title>Podcast3</title>
<link rel="shortcut icon" href="images/headphones_logo.png" />
</head> </head>
<body> <body>
@ -55,6 +56,7 @@
<br><br><br><br><br><br> <br><br><br><br><br><br>
<table><tr> <table><tr>
<td><img src="images/headphones_logo.png" width="40px"></td>
<?php <?php
$files = glob("podcasts/podcast3/*.mp3"); $files = glob("podcasts/podcast3/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)

2
podcast4.php
Unescape Escape View File

@ -5,6 +5,7 @@
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<title>Podcast4</title> <title>Podcast4</title>
<link rel="shortcut icon" href="images/headphones_logo.png" />
</head> </head>
<body> <body>
@ -55,6 +56,7 @@
<br><br><br><br><br><br> <br><br><br><br><br><br>
<table><tr> <table><tr>
<td><img src="images/headphones_logo.png" width="40px"></td>
<?php <?php
$files = glob("podcasts/podcast4/*.mp3"); $files = glob("podcasts/podcast4/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)

5
styles/stylesheet.css
Unescape Escape View File

@ -1,10 +1,11 @@
body { body {
background: #F6F5F5; background: #F6F5F5;
font-family: "Old Standard TT"; font-family: "Old Standard TT";
font-size: 1.2rem; font-size: 1.1rem;
line-height: 1.3; line-height: 1.3;
letter-spacing: 1px; letter-spacing: 1px;
padding: 20px; padding: 20px;
/*transform: scale(1.0);*/
} }
section { section {
@ -40,7 +41,7 @@ a img {
h2 { h2 {
text-align: center; text-align: center;
letter-spacing: 4px; letter-spacing: 4px;
font-size: 32px; font-size: 26px;
margin: 5px; margin: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }

2
texts/dear_listener.txt
Unescape Escape View File

@ -1,4 +1,4 @@
<div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;">
<p>Dear listener,</p> <p>Dear listener,</p>
you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right"><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone"</div></div></div> parts of the podcasts that you find interesting by repeating or annotate them with your vocal messages. <p>Maximum duration: 1 min</p> you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right"><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone"</div></div></div> parts of the podcasts that you find worthy of attention by repeating or annotate them with your own voice messages. <p>Maximum duration: 1 min</p>

29
thesis-angeliki.php
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save