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

edit podcasts

Browse Source
master
Angeliki 6 years ago
parent 94c1306621
commit 4425e34d92
8 changed files with 238 additions and 253 deletions
Show Stats Download Patch File Download Diff File

15
amplification.php
Unescape Escape View File

@ -16,7 +16,7 @@
<body> <body>
<form> <form style="font-size: 120%">
Filter by: Filter by:
<input type="radio" name="gender" value="male" checked onchange="piles()"> Workshop <input type="radio" name="gender" value="male" checked onchange="piles()"> Workshop
<input type="radio" name="gender" value="female" onchange="groups()"> Type<br> <input type="radio" name="gender" value="female" onchange="groups()"> Type<br>
@ -303,12 +303,6 @@
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div>
<div class="draggable scaleable-wrapper group_menu pileM"> <div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content"> <div class="drag-content">
@ -344,6 +338,13 @@
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div>
<!-- end draggable --> <!-- end draggable -->
<!-- reshuffle --> <!-- reshuffle -->

22
js/draggable.js
Unescape Escape View File

@ -1,13 +1,29 @@
// draggable // draggable
$(document).ready(function() { $(document).ready(function() {
var a = 3; var a = 3;
var dragOpts = {
cursor: "move",
cursor: "grab",
// axis: "y",
distance: "0",
cursorAt: {
top: 0,
left: 0
}
};
$('.draggable-circle').draggable(dragOpts,
{
start: function(event, ui) { $(this).css("z-index", a++); }
});
$('.draggable').draggable({ $('.draggable').draggable({
start: function(event, ui) { $(this).css("z-index", a++); } start: function(event, ui) { $(this).css("z-index", a++); }
}); });
// $('#resize').resizable({handles: 'se'}).draggable({
// start: function(event, ui) { $(this).css("z-index", a++); }
// });;
// font size relative to div draggable/resizable size // font size relative to div draggable/resizable size
var $wrapper = $(".scaleable-wrapper"); var $wrapper = $(".scaleable-wrapper");

48
player.php
Unescape Escape View File

@ -21,7 +21,7 @@
<!-- draggable audio tags/images --> <!-- draggable audio tags/images -->
<div class="ciclegraph"> <div class="ciclegraph">
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-meetings-warming.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-meetings-warming.mp3" class="audio-tag"></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" style="width:100%"> <img src="images/meeting-20190328-leeszaal-6.jpg" style="width:100%">
@ -29,7 +29,7 @@
<p>warming up @Leeszaal 28/3</p> <p>warming up @Leeszaal 28/3</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-discussing-20190530.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-discussing-20190530.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190530-leeszaal-4.jpg" target="_blank"> <a href="images/meeting-20190530-leeszaal-4.jpg" target="_blank">
<img src="images/meeting-20190530-leeszaal-4.jpg" style="width:100%"> <img src="images/meeting-20190530-leeszaal-4.jpg" style="width:100%">
@ -37,7 +37,7 @@
<p>discussing about voice in public @Leeszaal 30/5</p> <p>discussing about voice in public @Leeszaal 30/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-meeting-transcribing-20190508.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-meeting-transcribing-20190508.mp3" class="audio-tag"></audio>
<a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank"> <a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank">
<img src="images/vowels-20190508-leeszaal-3.jpg" style="width:100%"> <img src="images/vowels-20190508-leeszaal-3.jpg" style="width:100%">
@ -45,7 +45,7 @@
<p>trascribing+singing vowels @Leeszaal 3/5</p> <p>trascribing+singing vowels @Leeszaal 3/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-meeting-extracts-20190523.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-meeting-extracts-20190523.mp3" class="audio-tag"></audio>
<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" style="width:100%"> <img src="images/meeting-20190523-leeszaal-6.jpg" style="width:100%">
@ -53,7 +53,7 @@
<p>reading extracts @outside Leeszaal 23/5</p> <p>reading extracts @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-meetings-choir.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-meetings-choir.mp3" class="audio-tag"></audio>
<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" style="width:100%"> <img src="images/vowels-20190328-leeszaal.jpg" style="width:100%">
@ -62,7 +62,7 @@
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-meeting-warming-20190523.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-meeting-warming-20190523.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190523-leeszaal-7.jpg" target="_blank"> <a href="images/meeting-20190523-leeszaal-7.jpg" target="_blank">
<img src="images/meeting-20190523-leeszaal-7.jpg" style="width:100%"> <img src="images/meeting-20190523-leeszaal-7.jpg" style="width:100%">
@ -71,7 +71,7 @@
<p>warming up @outside Leeszaal 23/5</p> <p>warming up @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/distort_leeszaal_20190523-1341.mp3" class="audio-tag"></audio> <audio controls src="audio/distort_leeszaal_20190523-1341.mp3" class="audio-tag"></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190523-leeszaal-2.jpg" style="width:100%"> <img src="images/meeting-20190523-leeszaal-2.jpg" style="width:100%">
@ -79,7 +79,7 @@
<p>personal experiences-distorted voice @outside Leeszaal 23/5</p> <p>personal experiences-distorted voice @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-extracts-20190530.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-extracts-20190530.mp3" class="audio-tag"></audio>
<a href="images/fresh1.jpg" target="_blank"> <a href="images/fresh1.jpg" target="_blank">
<img src="images/fresh1.jpg" style="width:100%"> <img src="images/fresh1.jpg" style="width:100%">
@ -87,26 +87,26 @@
<p>reading extracts @Leeszaal 30/5</p> <p>reading extracts @Leeszaal 30/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/finearts-meeting-discussion.mp3" class="audio-tag"></audio> <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> <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> <p>discussing about voice in public @Fine Arts 29/3</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-meeting-warming-20190508.mp3" class="audio-tag"></audio> <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> <a href="" target="_blank"><img src="images/meeting-20190508_leeszaal.jpg" style="width:100%" /></a>
<p>warming up @Leeszaal 8/5</p> <p>warming up @Leeszaal 8/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-meetings-transcribing.mp3" class="audio-tag"></audio> <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> <a href="" target="_blank"><img src="images/meeting-20190328-leeszaal-1.JPG" style="width:100%" /></a>
<p>transcribing vowels @Leeszaal 28/3</p> <p>transcribing vowels @Leeszaal 28/3</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-warming-20190530.mp3" class="audio-tag"></audio> <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> <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> <p>warming up @Leeszaal 30/5</p>
@ -114,20 +114,20 @@
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/finearts-meeting-choir.mp3" class="audio-tag"></audio> <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> <a href="" target="_blank"><img src="images/vowels-20190329-finearts.jpg" style="width:100%" /></a>
<p>singing vowels @Fine Arts 29/3</p> <p>singing vowels @Fine Arts 29/3</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-coffee-20190530.mp3" class="audio-tag"></audio> <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> <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> <p>coffee time @Leeszaal 30/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/distort_leeszaal_20190523-1336.mp3" class="audio-tag"></audio> <audio controls src="audio/distort_leeszaal_20190523-1336.mp3" class="audio-tag"></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190523-leeszaal-1.jpg" style="width:100%"> <img src="images/meeting-20190523-leeszaal-1.jpg" style="width:100%">
@ -136,7 +136,7 @@
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/finearts-meeting-transcribing.mp3" class="audio-tag"></audio> <audio controls src="audio/finearts-meeting-transcribing.mp3" class="audio-tag"></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190329-finearts-2.JPG" style="width:100%" /> <img src="images/meeting-20190329-finearts-2.JPG" style="width:100%" />
@ -144,7 +144,7 @@
<p>transcribing vowels @Fine Arts 29/3</p> <p>transcribing vowels @Fine Arts 29/3</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/finearts-meeting-extracts.mp3" class="audio-tag"></audio> <audio controls src="audio/finearts-meeting-extracts.mp3" class="audio-tag"></audio>
<a href="images/carson-extract.jpg" target="_blank"> <a href="images/carson-extract.jpg" target="_blank">
<img src="images/carson-extract.jpg" style="width:100%" /> <img src="images/carson-extract.jpg" style="width:100%" />
@ -153,7 +153,7 @@
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-meeting-transcribing-20190523.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-meeting-transcribing-20190523.mp3" class="audio-tag"></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" style="width:100%"> <img src="images/meeting-20190523-leeszaal-4.jpg" style="width:100%">
@ -161,7 +161,7 @@
<p>transcribing vowels @outside Leeszaal 23/5</p> <p>transcribing vowels @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-sentenses-distorted-20190530.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-sentenses-distorted-20190530.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank"> <a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank">
<img src="images/meeting-20190530-leeszaal-1.jpg" style="width:100%"> <img src="images/meeting-20190530-leeszaal-1.jpg" style="width:100%">
@ -169,14 +169,14 @@
<p>statements- distorted voice @Leeszaal 30/5</p> <p>statements- distorted voice @Leeszaal 30/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-meetings-discussion.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-meetings-discussion.mp3" class="audio-tag"></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190328-leeszaal-2.JPG" style="width:100%" /></a> <img src="images/meeting-20190328-leeszaal-2.JPG" style="width:100%" /></a>
<p>discussing about voice in public @Leeszaal 28/3</p> <p>discussing about voice in public @Leeszaal 28/3</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-singing-distorted-20190530.mp3" class="audio-tag"></audio> <audio controls src="audio/leeszaal-singing-distorted-20190530.mp3" class="audio-tag"></audio>
<a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank"> <a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank">
<img src="images/vowels-20190508-leeszaal-1.jpg" style="width:100%" /></a> <img src="images/vowels-20190508-leeszaal-1.jpg" style="width:100%" /></a>
@ -185,20 +185,20 @@
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/finearts-meeting-choirhigh.mp3" class="audio-tag"></audio> <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> <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> <p>singing vowels (high) @Fine Arts 29/3</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/leeszaal-meeting-extracts-20190508.mp3" class="audio-tag"></audio> <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> <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> <p>reading extracts @Leeszaal 8/5</p>
</div> </div>
<div class="draggable circle"> <div class="draggable-circle circle">
<audio controls src="audio/finearts-meeting-warming.mp3" class="audio-tag"></audio> <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> <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> <p>warming up @Fine Arts 29/3</p>

13
podcast1.php
Unescape Escape View File

@ -54,18 +54,18 @@
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;"> <div class="draggable scaleable-wrapper" style="top: 110%; left: 1%;">
<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">
(thesis) (thesis)
@ -117,13 +117,14 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<br /> <br />
<br /> <br />
<br /> <br />
<h3>VISITORS' RECORDINGS</h3> <h3>VISITORS' RECORDINGS</h3><br />
<?php <?php
$files = glob("uploads/1/*"); $files = glob("uploads/1/*");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)
{$num = $files[$i]; {$num = $files[$i];
$var1 = $_GET["files"]["name"]; $var1 = $_GET["files"]["name"];
echo '<audio src='.$num.' controls></audio><br /><br />'; } echo '<audio src='.$num.' controls></audio><br />';
echo date("F d Y H:i:s",filemtime($num)).'<br /><br />'; }
?> ?>
</div> </div>

90
podcast2.php
Unescape Escape View File

@ -7,11 +7,13 @@
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> --> <!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<title>Podcast2</title> <title>Podcast2</title>
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
<style>
h3 {font-weight: normal !important}
</style>
</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;">
@ -19,26 +21,26 @@
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" style="top: 110%; right: 3%;">
<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">
(workshops) (workshops)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" style="top: 130%; right: 7%;">
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content"> <div class="drag-content">
(first experiments) (first experiments)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" style="top: 90%; right: 5%;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content"> <div class="drag-content">
(audio archive) (audio archive)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" style="top: 92%; left: 2%;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content"> <div class="drag-content">
(main page) (main page)
@ -52,18 +54,18 @@
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;"> <div class="draggable scaleable-wrapper" style="top: 110%; left: 1%;">
<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">
(thesis) (thesis)
@ -71,15 +73,21 @@
</div> </div>
<br><br><br><br><br><br> <br><br><br><br><br><br>
<table><tr> <table>
<td><img src="images/headphones_logo.png" width="40px"></td> <tr>
<td></td>
<td><h3 style="text-align: left !important">EPISODES</h3></td>
</tr>
<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++)
{$num = $files[$i]; {$num = $files[$i];
$var1 = $_GET["files"]["name"]; $var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt'; echo '<td><div class="tooltip-wrap no-underline"><audio src='.$num.' controls></audio><div class="tooltip-content-down"><div class="left_col"><h3>NARRATOR</h3>';include $num.'.txt';
echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">'; echo '</div><div class="right_col"><h3>SPEAKERS</h3>'; include $num.'-M.txt';
echo '</div></div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
include $num.'-METADATA.txt'; include $num.'-METADATA.txt';
echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?> echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table> </tr></table>
@ -87,14 +95,14 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<br> <br>
<div align="center"> <div align="center">
<?php include 'texts/dear_listener.txt'; ?> <?php include 'texts/dear_listener.txt'; ?>
<!-- recorder --> <!-- recorder -->
<div class="recorder"> <div class="recorder">
<input type="button" class="start" value="Record" /> <input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" /> <input type="button" class="stop" value="Stop" />
<pre class="status"></pre> <pre class="status"></pre>
</div> </div>
<div id="playerContainer"></div> <div id="playerContainer"></div>
<br /> <br />
@ -105,18 +113,20 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<div id="dataUrlcontainer" hidden></div> <div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre> <pre id="log" hidden></pre>
</div>
<br />
<br />
<br />
<?php <br />
$files = glob("uploads/2/*"); <br />
for ($i=0; $i<count($files); $i++) <br />
{$num = $files[$i]; <h3>VISITORS' RECORDINGS</h3>
$var1 = $_GET["files"]["name"]; <?php
echo '<audio src='.$num.' controls></audio><br /><br />'; } $files = glob("uploads/2/*");
?> for ($i=0; $i<count($files); $i++)
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<audio src='.$num.' controls></audio><br />';
echo date("F d Y H:i:s",filemtime($num)).'<br /><br />'; }
?>
</div>
</div> </div>
@ -225,30 +235,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
} }
</script> </script>
<!-- script for subs and sound -->
<script>
var dialogueTimings = [10,24,28,58,115,120,124,134,138,142,152,160],
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';
}
}
;
</script>

92
podcast3.php
Unescape Escape View File

@ -7,38 +7,40 @@
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> --> <!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<title>Podcast3</title> <title>Podcast3</title>
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
<style>
h3 {font-weight: normal !important}
</style>
</head> </head>
<body> <body>
<!-- draggable --> <!-- draggable -->
<br><br> <br><br>
<h3 id="box-title" style="width: 215px; left: 45%; position: absolute;"> <h3 id="box-title" style="width: 200px; left: 45%; position: absolute;">
"Blocking our Voices" "Blocking our Voices"
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" style="top: 110%; right: 3%;">
<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">
(workshops) (workshops)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" style="top: 130%; right: 7%;">
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content"> <div class="drag-content">
(first experiments) (first experiments)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" style="top: 90%; right: 5%;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content"> <div class="drag-content">
(audio archive) (audio archive)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" style="top: 92%; left: 2%;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content"> <div class="drag-content">
(main page) (main page)
@ -52,18 +54,18 @@
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;"> <div class="draggable scaleable-wrapper" style="top: 110%; left: 1%;">
<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">
(thesis) (thesis)
@ -71,15 +73,21 @@
</div> </div>
<br><br><br><br><br><br> <br><br><br><br><br><br>
<table><tr> <table>
<td><img src="images/headphones_logo.png" width="40px"></td> <tr>
<td></td>
<td><h3 style="text-align: left !important">EPISODES</h3></td>
</tr>
<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++)
{$num = $files[$i]; {$num = $files[$i];
$var1 = $_GET["files"]["name"]; $var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt'; echo '<td><div class="tooltip-wrap no-underline"><audio src='.$num.' controls></audio><div class="tooltip-content-down"><div class="left_col"><h3>NARRATOR</h3>';include $num.'.txt';
echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">'; echo '</div><div class="right_col"><h3>SPEAKERS</h3>'; include $num.'-M.txt';
echo '</div></div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
include $num.'-METADATA.txt'; include $num.'-METADATA.txt';
echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?> echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table> </tr></table>
@ -87,14 +95,14 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<br> <br>
<div align="center"> <div align="center">
<?php include 'texts/dear_listener.txt'; ?> <?php include 'texts/dear_listener.txt'; ?>
<!-- recorder --> <!-- recorder -->
<div class="recorder"> <div class="recorder">
<input type="button" class="start" value="Record" /> <input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" /> <input type="button" class="stop" value="Stop" />
<pre class="status"></pre> <pre class="status"></pre>
</div> </div>
<div id="playerContainer"></div> <div id="playerContainer"></div>
<br /> <br />
@ -105,18 +113,20 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<div id="dataUrlcontainer" hidden></div> <div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre> <pre id="log" hidden></pre>
</div>
<br />
<br />
<br />
<?php <br />
$files = glob("uploads/3/*"); <br />
for ($i=0; $i<count($files); $i++) <br />
{$num = $files[$i]; <h3>VISITORS' RECORDINGS</h3>
$var1 = $_GET["files"]["name"]; <?php
echo '<audio src='.$num.' controls></audio><br /><br />'; } $files = glob("uploads/3/*");
?> for ($i=0; $i<count($files); $i++)
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<audio src='.$num.' controls></audio><br />';
echo date("F d Y H:i:s",filemtime($num)).'<br /><br />'; }
?>
</div>
</div> </div>
@ -225,30 +235,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
} }
</script> </script>
<!-- script for subs and sound -->
<script>
var dialogueTimings = [10,24,28,58,115,120,124,134,138,142,152,160],
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';
}
}
;
</script>

95
podcast4.php
Unescape Escape View File

@ -5,40 +5,43 @@
<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/widescreen.css" rel="stylesheet" type="text/css"> <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> --> <!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<title>Podcast4</title> <title>Podcast3</title>
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
<style>
h3 {font-weight: normal !important}
</style>
</head> </head>
<body> <body>
<!-- draggable --> <!-- draggable -->
<br><br> <br><br>
<h3 id="box-title" style="width: 360px; left: 42.5%; position: absolute;"> <h3 id="box-title" style="width: 360px; left: 40.5%; position: absolute;">
"City Sounds Reveal Voice Binaries" "City Sounds Reveal Voice Binaries"
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" style="top: 110%; right: 3%;">
<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">
(workshops) (workshops)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" style="top: 130%; right: 7%;">
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content"> <div class="drag-content">
(first experiments) (first experiments)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" style="top: 90%; right: 5%;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content"> <div class="drag-content">
(audio archive) (audio archive)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" style="top: 92%; left: 2%;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content"> <div class="drag-content">
(main page) (main page)
@ -52,18 +55,18 @@
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;"> <div class="draggable scaleable-wrapper" style="top: 110%; left: 1%;">
<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">
(thesis) (thesis)
@ -71,15 +74,21 @@
</div> </div>
<br><br><br><br><br><br> <br><br><br><br><br><br>
<table><tr> <table>
<td><img src="images/headphones_logo.png" width="40px"></td> <tr>
<td></td>
<td><h3 style="text-align: left !important">EPISODES</h3></td>
</tr>
<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++)
{$num = $files[$i]; {$num = $files[$i];
$var1 = $_GET["files"]["name"]; $var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt'; echo '<td><div class="tooltip-wrap no-underline"><audio src='.$num.' controls></audio><div class="tooltip-content-down"><div class="left_col"><h3>NARRATOR</h3>';include $num.'.txt';
echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">'; echo '</div><div class="right_col"><h3>SPEAKERS</h3>'; include $num.'-M.txt';
echo '</div></div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
include $num.'-METADATA.txt'; include $num.'-METADATA.txt';
echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?> echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table> </tr></table>
@ -87,14 +96,14 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<br> <br>
<div align="center"> <div align="center">
<?php include 'texts/dear_listener.txt'; ?> <?php include 'texts/dear_listener.txt'; ?>
<!-- recorder --> <!-- recorder -->
<div class="recorder"> <div class="recorder">
<input type="button" class="start" value="Record" /> <input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" /> <input type="button" class="stop" value="Stop" />
<pre class="status"></pre> <pre class="status"></pre>
</div> </div>
<div id="playerContainer"></div> <div id="playerContainer"></div>
<br /> <br />
@ -105,18 +114,20 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<div id="dataUrlcontainer" hidden></div> <div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre> <pre id="log" hidden></pre>
</div>
<br />
<br />
<br />
<?php <br />
$files = glob("uploads/4/*"); <br />
for ($i=0; $i<count($files); $i++) <br />
{$num = $files[$i]; <h3>VISITORS' RECORDINGS</h3>
$var1 = $_GET["files"]["name"]; <?php
echo '<audio src='.$num.' controls></audio><br /><br />'; } $files = glob("uploads/4/*");
?> for ($i=0; $i<count($files); $i++)
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<audio src='.$num.' controls></audio><br />';
echo date("F d Y H:i:s",filemtime($num)).'<br /><br />'; }
?>
</div>
</div> </div>
@ -225,30 +236,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
} }
</script> </script>
<!-- script for subs and sound -->
<script>
var dialogueTimings = [10,24,28,58,115,120,124,134,138,142,152,160],
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';
}
}
;
</script>

18
styles/widescreen.css
Unescape Escape View File

@ -50,7 +50,7 @@ a img {
} }
h1 { h1 {
font-size: 180%; font-size: 200%;
} }
h2 { h2 {
@ -554,6 +554,15 @@ input[type=checkbox]:checked ~ aside {
/*min-height: 100px;*/ /*min-height: 100px;*/
} }
.draggable-circle {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
background-color: white;
cursor: all-scroll;
position: absolute !important;
width: 20%;
display: inline;
}
.draggable p { .draggable p {
text-align: center; text-align: center;
color: #A19696; color: #A19696;
@ -699,15 +708,14 @@ li, #angela, #judith, #laurie, #dana, #katalin {
height: 30%; height: 30%;
top: 50%; top: 50%;
left: 30% left: 30%
/*margin: calc(100px / 2 + 0px);*/
} }
.ciclegraph:before { .ciclegraph:before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;
width: calc( 100% - 2px * 2); /* width: calc( 100% - 2px * 2);
height: calc( 100% - 2px * 2 ); height: calc( 100% - 2px * 2 );*/
} }
.ciclegraph .circle { .ciclegraph .circle {
@ -715,7 +723,7 @@ li, #angela, #judith, #laurie, #dana, #katalin {
top: 50%; left: 50%; top: 50%; left: 50%;
width: 20%; width: 20%;
/*height: 100px;*/ /*height: 100px;*/
margin: calc( -100px / 2 );
} }
/*}*/ /*}*/
Write Preview
Loading…
Cancel
Save