corrected draggable bug and added possibility of input name in podcasts and some other things

master
Angeliki 5 years ago
parent 806788e366
commit 7a22071725

@ -6,8 +6,8 @@
<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"> -->
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="js/jquery-ui.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/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>

@ -6,8 +6,8 @@
<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"> -->
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="js/jquery-ui.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/draggable.js"></script> <script src="js/draggable.js"></script>
<title>Diary of West Rotterdam</title> <title>Diary of West Rotterdam</title>

@ -8,8 +8,8 @@
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> --> <!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="js/jquery-ui.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/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
@ -50,6 +50,7 @@
<div class="draggable scaleable-wrapper menu"style="top:3%;left:72%; width: 25%; font-size: 100%"> <div class="draggable scaleable-wrapper menu"style="top:3%;left:72%; width: 25%; font-size: 100%">
<h2 style="font-size: 150%;"><a href="amplification.php" >Amplification of female voices</a></h2> <h2 style="font-size: 150%;"><a href="amplification.php" >Amplification of female voices</a></h2>
<div class="drag-content"> <div class="drag-content">
(workshops)<br><br>
<?php include 'texts/amplification.txt'; ?> <?php include 'texts/amplification.txt'; ?>
</div> </div>
</div> </div>
@ -90,6 +91,7 @@
<div class="draggable scaleable-wrapper menu"style="top:8%;left:35%"> <div class="draggable scaleable-wrapper menu"style="top:8%;left:35%">
<h2 ><a href="player.php" >Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2> <h2 ><a href="player.php" >Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
<div class="drag-content"> <div class="drag-content">
(audio archive)<br><br>
<?php include 'texts/player.txt'; ?> <?php include 'texts/player.txt'; ?>
</div> </div>
</div> </div>
@ -115,6 +117,7 @@
<div class="draggable scaleable-wrapper menu" style="top:64%;left:15%;" > <div class="draggable scaleable-wrapper menu" style="top:64%;left:15%;" >
<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)<br><br>
<?php include 'texts/thesis-summary.txt'; ?> <?php include 'texts/thesis-summary.txt'; ?>
</div> </div>
</div> </div>
@ -122,6 +125,7 @@
<div class="draggable scaleable-wrapper menu"style="top:85%;left:8%;width: 12%; font-size: 80%;"> <div class="draggable scaleable-wrapper menu"style="top:85%;left:8%;width: 12%; font-size: 80%;">
<h2 style=";"><a href="diary.php" >Diary of West Rotterdam</a></h2> <h2 style=";"><a href="diary.php" >Diary of West Rotterdam</a></h2>
<div class="drag-content"> <div class="drag-content">
(first experiments)<br><br>
<?php include 'texts/diary.txt'; ?> <?php include 'texts/diary.txt'; ?>
</div></div> </div></div>
</div> </div>

@ -11,10 +11,10 @@ $(document).ready(function() {
cursor: "grab", cursor: "grab",
// axis: "y", // axis: "y",
distance: "0", distance: "0",
cursorAt: { // cursorAt: {
top: 0, // top: 0,
left: 0 // left: 0
} // }
}; };
$('.draggable-circle').draggable(dragOpts, $('.draggable-circle').draggable(dragOpts,
{ {

11008
js/jquery-1.12.4.js vendored

File diff suppressed because it is too large Load Diff

18706
js/jquery-ui.js vendored

File diff suppressed because it is too large Load Diff

@ -4,8 +4,8 @@
<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"> -->
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="js/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>
<title>Player</title> <title>Player</title>
@ -279,7 +279,7 @@ $("#katalin").click(function(){
<div class="draggable full-width" style="top: 160%; left:0.2%"> <div class="draggable full-width" style="top: 160%; left:0.2%">
<button id="but"><h3>listen</h3></button> <button id="but"><h3>listen</h3></button>
First sample of city sounds related to public/private and speech and recordings of descriptions from different people First sample of city sounds, related to public/private and speech, and recordings of people describing them
<div class="tooltip-wrap no-pink"> <div class="tooltip-wrap no-pink">
<audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3" class="audio-tag"></audio><a href="" target="_blank"> <audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
@ -364,7 +364,7 @@ $("#katalin").click(function(){
<!-- second sounwalk player --> <!-- second sounwalk player -->
<div class="draggable full-width" style="top: 190%; left:0.2%"> <div class="draggable full-width" style="top: 190%; left:0.2%">
<button id="butB"><h3>listen</h3></button> <button id="butB"><h3>listen</h3></button>
Second sample of city sounds related to public/private and speech and recordings of descriptions from different people Second sample of city sounds, related to public/private and speech, and recordings of people describing them
<div class="tooltip-wrap no-pink"> <div class="tooltip-wrap no-pink">
<audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3" class="audio-tag"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
@ -400,7 +400,7 @@ $("#katalin").click(function(){
</div> </div>
</div></div> </div></div>
<div class="tooltip-wrap no-pinksecon"> <div class="tooltip-wrap no-pink">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3" class="audio-tag"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
@ -540,14 +540,31 @@ var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
} }
; ;
// players in circle // players in circle
function degrees_to_radians(degrees)
{
var pi = Math.PI;
return degrees * (pi/180);
}
document.querySelectorAll( '.ciclegraph' ).forEach( ( ciclegraph )=>{ document.querySelectorAll( '.ciclegraph' ).forEach( ( ciclegraph )=>{
let circles = ciclegraph.querySelectorAll( '.circle' ) let circles = ciclegraph.querySelectorAll( '.circle' )
let angle = 360-90, dangle = 360 / circles.length let angle = 360-90, dangle = 360 / circles.length
for( let i = 0; i < circles.length; ++i ){ for( let i = 0; i < circles.length; ++i ){
let circle = circles[i] let circle = circles[i]
angle += dangle angle += dangle
circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)` let cx=ciclegraph.clientWidth / 2,
cy=300,
r=(ciclegraph.clientWidth / 2),
x=(Math.cos(degrees_to_radians(angle))*r)+cx,
y=(Math.sin(degrees_to_radians(angle))*r)+cy;
// circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`
circle.style.left=x+'px'
circle.style.top=y+'px'
} }
}) })

@ -86,6 +86,9 @@
<tr> <tr>
<td><img src="images/headphones_logo.png" width="40px"></td> <td><img src="images/headphones_logo.png" width="40px"></td>
<?php <?php
// ini_set('display_errors',1);
// ini_set('display_startup_errors',1);
// error_reporting(E_ALL);
$files = glob("podcasts/podcast1/*.mp3"); $files = glob("podcasts/podcast1/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)
{$num = $files[$i]; {$num = $files[$i];
@ -127,13 +130,23 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
<br /> <br />
<h3>VISITORS' RECORDINGS</h3><br /> <h3>VISITORS' RECORDINGS</h3><br />
<?php <?php
$files = glob("uploads/1/*"); $items=array();
for ($i=0; $i<count($files); $i++) $handle=fopen('./uploads/1/index.jsons','r');
{$num = $files[$i]; if ($handle) {
$var1 = $_GET["files"]["name"]; while (($line=fgets($handle)) !== false) {
echo '<audio src='.$num.' controls></audio><br />'; $item=json_decode($line,true);
// echo '<div id="name"></div>'; $items[]=$item;
echo date("d/m/Y",filemtime($num)).'<br /><br />'; }
}
}
$items=array_reverse($items);
foreach($items as $item) {
$url=substr($item['file'],3);
echo '<div class=file>';
echo '<audio src='.$url.' controls></audio><br />';
echo '<div class="filename">'.$item['name'].'</div>';
echo '</div>';
}
?> ?>
</div> </div>
@ -147,8 +160,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
<script type="text/javascript" src="js/mp3recorder.js"></script> <script type="text/javascript" src="js/mp3recorder.js"></script>
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="js/jquery-ui.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> <script src="js/main.js"></script>
<!-- scripts for recorder --> <!-- scripts for recorder -->
@ -212,6 +225,7 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
au.controls = true; au.controls = true;
au.src = url; au.src = url;
//$recorder.append(au); //$recorder.append(au);
// $('#playerContainer').append($('<input'));
$('#playerContainer').append(au); $('#playerContainer').append(au);
@ -226,6 +240,7 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
<script> <script>
function upload(){ function upload(){
var name = prompt('Enter a name for your sound clip?','My unnamed clip');
var dataURL = document.getElementById("dataUrlcontainer").innerHTML; var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
@ -233,7 +248,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
type: "POST", type: "POST",
url: "scripts/uploadMp3_1.php", url: "scripts/uploadMp3_1.php",
data: { data: {
base64: dataURL base64: dataURL,
name: name
} }
}).done(function(o) { }).done(function(o) {
console.log('saved'); console.log('saved');

@ -147,8 +147,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
<script type="text/javascript" src="js/mp3recorder.js"></script> <script type="text/javascript" src="js/mp3recorder.js"></script>
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="js/jquery-ui.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> <script src="js/main.js"></script>
<!-- scripts for recorder --> <!-- scripts for recorder -->

@ -144,8 +144,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
<script type="text/javascript" src="js/mp3recorder.js"></script> <script type="text/javascript" src="js/mp3recorder.js"></script>
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="js/jquery-ui.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> <script src="js/main.js"></script>
<!-- scripts for recorder --> <!-- scripts for recorder -->

@ -146,8 +146,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
<script type="text/javascript" src="js/mp3recorder.js"></script> <script type="text/javascript" src="js/mp3recorder.js"></script>
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="js/jquery-ui.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> <script src="js/main.js"></script>
<!-- scripts for recorder --> <!-- scripts for recorder -->

@ -9,5 +9,11 @@ $img = str_replace(' ', '+', $img);
$data = base64_decode($img); $data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.mp3'; $file = UPLOAD_DIR . uniqid() . '.mp3';
$success = file_put_contents($file, $data); $success = file_put_contents($file, $data);
# make a database of recordings
$item=array('name'=>$_POST['name'],'date'=>filemtime($file), 'file'=>$file);
$handle=fopen('../uploads/1/index.jsons','a');
fwrite($handle,json_encode($item)."\n");
fclose($handle);
print $success ? $file : 'Unable to save the file.'; print $success ? $file : 'Unable to save the file.';
?> ?>

@ -1,6 +1,7 @@
/*@media only screen and (min-width: 900px) {*/ /*@media only screen and (min-width: 900px) {*/
body { body {
background: #F6F5F5; background: #F6F5F5;
/*background: #fcf4f6;*/
font-family: "Old Standard TT"; font-family: "Old Standard TT";
font-size: 95%; font-size: 95%;
line-height: 1.3; line-height: 1.3;
@ -689,7 +690,7 @@ li, #angela, #judith, #laurie, #dana, #katalin {
position: relative; position: relative;
width: 50%; width: 50%;
height: 30%; height: 30%;
top: 50%; top: 200px;
left: 30% left: 30%
} }
@ -707,6 +708,11 @@ li, #angela, #judith, #laurie, #dana, #katalin {
width: 20%; width: 20%;
/*height: 100px;*/ /*height: 100px;*/
}
.ciclegraph .circle:hover {
z-index:1;
} }
/*}*/ /*}*/

@ -1,4 +1,4 @@
'Let's Amplify Unspeakable Things' is an online platform of exploration and research, regarding female voices in public and their amplification, developed by Angeliki Diakrousi. It creates a space for excluded voices to be explored (online and physical spaces), that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational in public dialogues. It includes a set of <div class="tooltip-wrap">podcasts <div class="tooltip-content-right" ><div>Different frictions emerged, between the technical and non technical</div></div></div>that revisit and overlay an archive of audio recordings, produced in situated<div class="tooltip-wrap">workshops<div class="tooltip-content-right" ><div>Different frictions emerged, between academic and non-academic world</div></div></div> and soundwalks, and media sources from a body of research. 'Let's Amplify Unspeakable Things' is based on the concept that amplification can provide presence through repetition and multiplication, as the structure of the workshops and the website reveals. The project itself is a process of feedback and iteration of actions, throughout a period of four months, situated around the space of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> and <a href="https://hub.xpub.nl/">hub.xpub.nl</a>. It exists in between the friction of institutions (a public library and an academy) and different public spheres (wereldvrouwen, academic), and it aims to go beyond their binaries. 'Let's Amplify Unspeakable Things' is an online platform of exploration and research, regarding <div class="tooltip-wrap">female voices<div class="tooltip-content-right"><div>The term 'female voices' refers as well to the primitive and non-rational ways of expression, that the contemporary democracy tends to exclude, and overpasses the gender connotations</div></div></div> in public and their amplification, developed by Angeliki Diakrousi. It creates a space for excluded voices to be explored (online and physical spaces), that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational in public dialogues. It includes a set of <div class="tooltip-wrap">podcasts <div class="tooltip-content-right" ><div>Different frictions emerged, between the technical and non technical</div></div></div>that revisit and overlay an archive of audio recordings, produced in situated<div class="tooltip-wrap">workshops<div class="tooltip-content-right" ><div></div></div></div> and soundwalks, and media sources from a body of research. 'Let's Amplify Unspeakable Things' is based on the concept that amplification can provide presence through repetition and multiplication, as the structure of the workshops and the website reveals. The project itself is a process of feedback and iteration of actions, throughout a period of four months, situated around the space of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> and <a href="https://hub.xpub.nl/">hub.xpub.nl</a>. It exists in between the friction of institutions (a public library and an academy) and different public spheres (wereldvrouwen, academic), and it aims to go beyond their binaries.

@ -6,8 +6,8 @@
<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"> -->
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="js/jquery-ui.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/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>

Loading…
Cancel
Save