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>
<form>
<form style="font-size: 120%">
Filter by:
<input type="radio" name="gender" value="male" checked onchange="piles()"> Workshop
<input type="radio" name="gender" value="female" onchange="groups()"> Type<br>
@ -303,12 +303,6 @@
</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">
<h2 ><a href="player.php">Player</a></h2>
<div class="drag-content">
@ -344,6 +338,13 @@
</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 -->
<!-- reshuffle -->

22
js/draggable.js
Unescape Escape View File

@ -1,13 +1,29 @@
// draggable
$(document).ready(function() {
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({
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
var $wrapper = $(".scaleable-wrapper");

48
player.php
Unescape Escape View File

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

13
podcast1.php
Unescape Escape View File

@ -54,18 +54,18 @@
</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>
</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>
</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>
</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>
<div class="drag-content">
(thesis)
@ -117,13 +117,14 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<br />
<br />
<br />
<h3>VISITORS' RECORDINGS</h3>
<h3>VISITORS' RECORDINGS</h3><br />
<?php
$files = glob("uploads/1/*");
for ($i=0; $i<count($files); $i++)
{$num = $files[$i];
$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>

90
podcast2.php
Unescape Escape View File

@ -7,11 +7,13 @@
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<title>Podcast2</title>
<link rel="shortcut icon" href="images/headphones_logo.png" />
<style>
h3 {font-weight: normal !important}
</style>
</head>
<body>
<!-- draggable -->
<br><br>
<h3 id="box-title" style="width: 200px; left: 45%; position: absolute;">
@ -19,26 +21,26 @@
</h3>
<!-- 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>
<div class="drag-content">
(workshops)
</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>
<div class="drag-content">
(first experiments)
</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>
<div class="drag-content">
(audio archive)
</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>
<div class="drag-content">
(main page)
@ -52,18 +54,18 @@
</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>
</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>
</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>
</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>
<div class="drag-content">
(thesis)
@ -71,15 +73,21 @@
</div>
<br><br><br><br><br><br>
<table><tr>
<td><img src="images/headphones_logo.png" width="40px"></td>
<table>
<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
$files = glob("podcasts/podcast2/*.mp3");
for ($i=0; $i<count($files); $i++)
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt';
echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
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><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';
echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table>
@ -87,14 +95,14 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<br>
<div align="center">
<?php include 'texts/dear_listener.txt'; ?>
<?php include 'texts/dear_listener.txt'; ?>
<!-- recorder -->
<div class="recorder">
<!-- recorder -->
<div class="recorder">
<input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" />
<pre class="status"></pre>
</div>
</div>
<div id="playerContainer"></div>
<br />
@ -105,18 +113,20 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre>
</div>
<br />
<br />
<br />
<?php
$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 /><br />'; }
?>
<br />
<br />
<br />
<h3>VISITORS' RECORDINGS</h3>
<?php
$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>
@ -225,30 +235,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
}
</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"> -->
<title>Podcast3</title>
<link rel="shortcut icon" href="images/headphones_logo.png" />
<style>
h3 {font-weight: normal !important}
</style>
</head>
<body>
<!-- draggable -->
<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"
</h3>
<!-- 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>
<div class="drag-content">
(workshops)
</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>
<div class="drag-content">
(first experiments)
</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>
<div class="drag-content">
(audio archive)
</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>
<div class="drag-content">
(main page)
@ -52,18 +54,18 @@
</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>
</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>
</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>
</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>
<div class="drag-content">
(thesis)
@ -71,15 +73,21 @@
</div>
<br><br><br><br><br><br>
<table><tr>
<td><img src="images/headphones_logo.png" width="40px"></td>
<table>
<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
$files = glob("podcasts/podcast3/*.mp3");
for ($i=0; $i<count($files); $i++)
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt';
echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
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><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';
echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table>
@ -87,14 +95,14 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<br>
<div align="center">
<?php include 'texts/dear_listener.txt'; ?>
<?php include 'texts/dear_listener.txt'; ?>
<!-- recorder -->
<div class="recorder">
<!-- recorder -->
<div class="recorder">
<input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" />
<pre class="status"></pre>
</div>
</div>
<div id="playerContainer"></div>
<br />
@ -105,18 +113,20 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre>
</div>
<br />
<br />
<br />
<?php
$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 /><br />'; }
?>
<br />
<br />
<br />
<h3>VISITORS' RECORDINGS</h3>
<?php
$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>
@ -225,30 +235,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
}
</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/widescreen.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" />
<style>
h3 {font-weight: normal !important}
</style>
</head>
<body>
<!-- draggable -->
<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"
</h3>
<!-- 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>
<div class="drag-content">
(workshops)
</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>
<div class="drag-content">
(first experiments)
</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>
<div class="drag-content">
(audio archive)
</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>
<div class="drag-content">
(main page)
@ -52,18 +55,18 @@
</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>
</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>
</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>
</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>
<div class="drag-content">
(thesis)
@ -71,15 +74,21 @@
</div>
<br><br><br><br><br><br>
<table><tr>
<td><img src="images/headphones_logo.png" width="40px"></td>
<table>
<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
$files = glob("podcasts/podcast4/*.mp3");
for ($i=0; $i<count($files); $i++)
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt';
echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
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><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';
echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table>
@ -87,14 +96,14 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<br>
<div align="center">
<?php include 'texts/dear_listener.txt'; ?>
<?php include 'texts/dear_listener.txt'; ?>
<!-- recorder -->
<div class="recorder">
<!-- recorder -->
<div class="recorder">
<input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" />
<pre class="status"></pre>
</div>
</div>
<div id="playerContainer"></div>
<br />
@ -105,18 +114,20 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
<div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre>
</div>
<br />
<br />
<br />
<?php
$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 /><br />'; }
?>
<br />
<br />
<br />
<h3>VISITORS' RECORDINGS</h3>
<?php
$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>
@ -225,30 +236,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
}
</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 {
font-size: 180%;
font-size: 200%;
}
h2 {
@ -554,6 +554,15 @@ input[type=checkbox]:checked ~ aside {
/*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 {
text-align: center;
color: #A19696;
@ -699,15 +708,14 @@ li, #angela, #judith, #laurie, #dana, #katalin {
height: 30%;
top: 50%;
left: 30%
/*margin: calc(100px / 2 + 0px);*/
}
.ciclegraph:before {
content: "";
position: absolute;
top: 0; left: 0;
width: calc( 100% - 2px * 2);
height: calc( 100% - 2px * 2 );
/* width: calc( 100% - 2px * 2);
height: calc( 100% - 2px * 2 );*/
}
.ciclegraph .circle {
@ -715,7 +723,7 @@ li, #angela, #judith, #laurie, #dana, #katalin {
top: 50%; left: 50%;
width: 20%;
/*height: 100px;*/
margin: calc( -100px / 2 );
}
/*}*/
Write Preview
Loading…
Cancel
Save