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

audio tags in circle

Browse Source
master
Angeliki 6 years ago
parent 15af465a56
commit 94c1306621
4 changed files with 241 additions and 355 deletions
Show Stats Download Patch File Download Diff File

157
amplification (copy).php
Unescape Escape View File

@ -1,157 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/draggable.js"></script>
<script src="js/main.js"></script>
<title>Amplification</title>
</head>
<body>
<!-- <h2 style="border: 1px solid; background-color: white; padding: 10px; width: 500px; position:absolute;top: 0; left: 45%;" >Amplification of female voices</h2>
-->
<!-- draggable archive -->
<!-- div vowels -->
<div id="resize" class="draggable ui-draggable-handle" style="top: 6px; left: 1038px; line-height: 0 !important;"><a href="images/vowels-leeszaal-test.jpg"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></a></div>
<div id="resize" class="draggable ui-draggable-handle" style="top: 47px; left: 1083px;line-height: 0 !important;"><a href="images/vowels-20190322-leeszaal.jpg"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></a></div>
<div id="resize" class="draggable ui-draggable-handle" style="top: 81px; left: 1137px; line-height: 0 !important;"><a href="images/vowels-20190328-leeszaal.jpg"><img src="images/vowels-20190328-leeszaal.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 116px; left: 1176px;"><a href="images/vowels-20190329-finearts.jpg" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 156px; left: 1216px;"><a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-1.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 196px; left: 1256px;"><a href="images/vowels-20190508-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-2.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 236px; left: 1296px;"><a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-3.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 276px; left: 1336px;"><a href="images/vowels-20190508-leeszaal-4.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-4.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 316px; left: 1376px;"><a href="images/vowels-20190508-leeszaal-5.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-5.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 356px; left: 1416px;"><a href="images/vowels-20190523-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-1.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 396px; left: 1456px;"><a href="images/vowels-20190523-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-2.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 436px; left: 1496px;"><a href="images/vowels-20190530-leeszaal.jpg" target="_blank"><img src="images/vowels-20190530-leeszaal.jpg" width="400px"></img></a></div>
<!-- div extracts -->
<div>
<div class="draggable ui-draggable-handle" style="top: 1300px; left: 900px; line-height: 0 !important;"><a href="images/carson-extract.jpg" target="_blank"><img src="images/carson-extract.jpg" width="550px" /></a></div>
<div class="draggable ui-draggable-handle" style="top: 1400px; left: 1000px; line-height: 0 !important;"><a href="images/fresh1.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a></div>
<div class="draggable ui-draggable-handle" style="top: 1500px; left: 1100px; line-height: 0 !important;"><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a></div>
</div>
<!-- div images -->
<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 406px;"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 306px;"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 189px; left: 264px;"><img src="images/meeting-20190329-finearts-2.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 574px; left: 100px;"><img src="images/meeting-20190329-finearts-1.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 570px; left: 125px;"><img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 838px; left: 385px;"><img src="images/meeting-20190328-leeszaal-1.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 384px; left: 16px;"><img src="images/meeting-20190328-leeszaal-2.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 225px; left: 228px;z-index: -1;"><img class="draggable" style="width: 200px !important" src="http://pzwiki.wdka.nl/mw-mediadesign/images/6/69/Poster_unpacking.png"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 337px; left: 506px;"><img src="images/meeting-20190523-leeszaal-1.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 140px; left: 206px;"><img src="images/meeting-20190523-leeszaal-2.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 237px; left: 306px;"><img src="images/meeting-20190523-leeszaal-3.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 310px; left: 560px;"><a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-1.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 200px; left: 446px;"><img src="images/meeting-20190523-leeszaal-4.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 600px; left: 520px;"><img src="images/meeting-20190523-leeszaal-5.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 410px; left: 430px;"><a href="images/meeting-20190508_leeszaal.jpg" target="_blank"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 440px; left: 200px;"><a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" width="400px"></img></a></div>
<!-- draggable menu-->
<div class="draggable scaleable-wrapper active-draggable" style="width: 500px; top: 20px; right: 0px;">
<h2><a class="active" href="amplification.php">Amplification of female voices</a></h2>
<div class="drag-content">
<?php include 'texts/amplification.txt'; ?>
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 1270px; right: 200px;">
<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: 1200px; right: 10px;">
<h2 ><a href="player.php">Player</a></h2>
<div class="drag-content">
(audio archive)
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 860px; right: 335px;">
<h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
<h2 ><a href="podcast4.php">Podcast4</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 920px; left: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 1420px; left: 150px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 1320px; left: 380px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 960px; right: 430px; z-index: 9;">
<h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
<div class="drag-content">
(thesis)
</div>
</div>
<!-- end draggable -->
</body>
</html>

243
player.php
Unescape Escape View File

@ -16,107 +16,53 @@
<body> <body>
<section style="margin-bottom: 20%;"> <section style="margin-bottom: 20%;">
<!-- draggable youtube links and other -->
<!-- sources -->
<div id="show1" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="500px" height="400px" src="https://www.youtube.com/embed/HlvfPizooII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show2" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="500" height="400" src="https://www.youtube.com/embed/JVpoOdz1AKQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show3" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="500" height="400" src="https://www.youtube.com/embed/SirOxIeuNDE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show4" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="500" height="400" src="https://www.youtube.com/embed/TY96Ma6YdtQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- links -->
<div class="draggable box_metadata" style="top: 110%; left:40%; width: 500px !important">
<h2>Online Sources</h2>
<li id="angela">
<a href="#" >Angela Davis @Occupy Wall Street</a>
</li>
<li id="judith">
<a href="#" >Judith Butler @Occupy Wall Street</a>
</li>
<li id="laurie">
<a href="#" >Laurie Anderson - Mach 20</a>
</li>
<li id="dana">
<a href="https://www.thisamericanlife.org/667/wartime-radio" target="_blank" >Ballout, D. (2019) ‘Good Morning, Kafranbel’, This American Life: Wartime Radio</a>
</li>
<li id="katalin">
<a href="#" >Vocal performance of Katalin Ladik in the film ‘Berberian Sound Studio’, 2012</a>
</li>
</div>
<script>
// draggable video pop up
$("#angela").click(function(){
$("#show1").fadeIn()
console.log("around")
});
$("#judith").click(function(){
$("#show2").fadeIn()
console.log("around")
});
$("#laurie").click(function(){
$("#show3").fadeIn()
console.log("around")
});
$("#katalin").click(function(){
$("#show4").fadeIn()
console.log("around")
});
</script>
<!-- draggable audio tags/images --> <!-- draggable audio tags/images -->
<div class="draggable" style="position:absolute; top:6%; left:51%;width: 13%"> <div class="ciclegraph">
<div class="draggable 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%">
</a> </a>
<p>warming up @Leeszaal 28/3</p> <p>warming up @Leeszaal 28/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:10%; left:48%;width: 13%"> <div class="draggable 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%">
</a> </a>
<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" style="position:absolute; top:16%; left:55%;width: 13%"> <div class="draggable 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%">
</a> </a>
<p>trascribing+singing vowels @Leeszaal 3/5</p> <p>trascribing+singing vowels @Leeszaal 3/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:15%; left:41%; width: 13%"> <div class="draggable 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%">
</a> </a>
<p>reading extracts @outside Leeszaal 23/5</p> <p>reading extracts @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:18%; left:37%; width: 13%"> <div class="draggable 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%">
</a> </a>
<p>singing vowels @outside Leeszaal 28/3</p> <p>singing vowels @outside Leeszaal 28/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:20%; left:63%;width: 13%"> <div class="draggable 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%">
@ -125,150 +71,208 @@ $("#katalin").click(function(){
<p>warming up @outside Leeszaal 23/5</p> <p>warming up @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:23%; left:66%;width: 13%"> <div class="draggable 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%">
</a> </a>
<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" style="position:absolute; top:27%; left:68%;width: 13%"> <div class="draggable 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%">
</a> </a>
<p>reading extracts @Leeszaal 30/5</p> <p>reading extracts @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:32%; left:70%;width: 13%"> <div class="draggable 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" style="position:absolute; top:36%; left:73%;width: 13%"> <div class="draggable 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" style="position:absolute; top:42%; left:75%;width: 13%"> <div class="draggable 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" style="position:absolute; top:47%; left:74%;width: 13%"> <div class="draggable 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>
</div> </div>
<div class="draggable" style="position:absolute; top:55%; left:73%;width: 13%"> <div class="draggable 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" style="position:absolute; top:59%; left:71%;width: 13%"> <div class="draggable 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" style="position:absolute; top:65%; left:70%;width: 13%"> <div class="draggable 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%">
</a> </a>
<p>singing vowels-distorted voice @outside Leeszaal 23/5</p> <p>singing vowels-distorted voice @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:23%; left:32%;width: 13%"> <div class="draggable 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%" />
</a> </a>
<p>transcribing vowels @Fine Arts 29/3</p> <p>transcribing vowels @Fine Arts 29/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:27%; left:29%; width: 13%"> <div class="draggable 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%" />
</a> </a>
<p>reading extracts @Fine Arts 29/3</p> <p>reading extracts @Fine Arts 29/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:33%; left:26%;width: 13%;"> <div class="draggable 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%">
</a> </a>
<p>transcribing vowels @outside Leeszaal 23/5</p> <p>transcribing vowels @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:38%; left:27%;width: 13%;"> <div class="draggable 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%">
</a> </a>
<p>statements- distorted voice @Leeszaal 30/5</p> <p>statements- distorted voice @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:46%; left:28%; width: 13%"> <div class="draggable 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" style="position:absolute; top:51%; left:29%; width: 13%"> <div class="draggable 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>
<p>singing vowels- distorted voice @Leeszaal 30/5</p> <p>singing vowels- distorted voice @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:57%; left:30%;width: 13%;"> <div class="draggable 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" style="position:absolute; top:61%; left:32%;width: 13%;"> <div class="draggable 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" style="position:absolute; top:66%; left:35%;width: 13%;"> <div class="draggable 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>
</div>
</div> </div>
<!-- draggable youtube links and other -->
<!-- sources -->
<div id="show1" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="93%" src="https://www.youtube.com/embed/HlvfPizooII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show2" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="93%" src="https://www.youtube.com/embed/JVpoOdz1AKQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show3" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="93%" src="https://www.youtube.com/embed/SirOxIeuNDE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show4" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="93%" src="https://www.youtube.com/embed/TY96Ma6YdtQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- links -->
<div class="draggable box_metadata" style="top: 40%; left:0.5%; width: 500px !important">
<h2>Online Sources</h2>
<li id="angela">
<a href="#" >Angela Davis @Occupy Wall Street</a>
</li>
<li id="judith">
<a href="#" >Judith Butler @Occupy Wall Street</a>
</li>
<li id="laurie">
<a href="#" >Laurie Anderson - Mach 20</a>
</li>
<li id="dana">
<a href="https://www.thisamericanlife.org/667/wartime-radio" target="_blank" >Ballout, D. (2019) ‘Good Morning, Kafranbel’, This American Life: Wartime Radio</a>
</li>
<li id="katalin">
<a href="#" >Vocal performance of Katalin Ladik in the film ‘Berberian Sound Studio’, 2012</a>
</li>
</div>
<script>
// draggable video pop up
$("#angela").click(function(){
$("#show1").fadeIn()
console.log("around")
});
$("#judith").click(function(){
$("#show2").fadeIn()
console.log("around")
});
$("#laurie").click(function(){
$("#show3").fadeIn()
console.log("around")
});
$("#katalin").click(function(){
$("#show4").fadeIn()
console.log("around")
});
</script>
</section> </section>
<br>
<!-- soundwalk player --> <!-- soundwalk player -->
<div class="draggable full-width" style="top: 140%; left:0.2%"> <div class="draggable full-width" style="top: 160%; left:0.2%">
<button id="but">listen</button> <button id="but">listen</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 descriptions from different people
<div class="tooltip-wrap"> <div class="tooltip-wrap">
@ -353,7 +357,7 @@ $("#katalin").click(function(){
<!-- second sounwalk player --> <!-- second sounwalk player -->
<div class="draggable full-width" style="top: 170%; left:0.2%"> <div class="draggable full-width" style="top: 190%; left:0.2%">
<button id="butB">listen</button> <button id="butB">listen</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 descriptions from different people
<div class="tooltip-wrap"> <div class="tooltip-wrap">
@ -432,14 +436,14 @@ $("#katalin").click(function(){
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" style="top:110%;left: 5; width: 300px; font-size: 20px"> <div class="draggable scaleable-wrapper" style="top:130%;left: 5; width: 300px; font-size: 20px">
<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:45%; left: 1%;width: 250px; font-size: 16px"> <div class="draggable scaleable-wrapper" style="top:75%; left: 1%;width: 250px; font-size: 16px">
<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)
@ -447,7 +451,7 @@ $("#katalin").click(function(){
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 200px; right: 0px;width: 150px; font-size: 16px"> <div class="draggable scaleable-wrapper" style="top: 30%; right: 0.5%;width: 150px; font-size: 16px">
<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)
@ -462,17 +466,17 @@ $("#katalin").click(function(){
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 65%; left: 2%;"> <div class="draggable scaleable-wrapper" style="top: 95%; left: 2%;">
<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: 75%; left: 2%;"> <div class="draggable scaleable-wrapper" style="top: 105%; left: 2%;">
<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: 85%; left: 3%;"> <div class="draggable scaleable-wrapper" style="top: 115%; left: 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: 95%; left: 1%;"> <div class="draggable scaleable-wrapper" style="top: 125%; left: 1%;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
@ -531,6 +535,17 @@ var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
} }
; ;
// players in circle
document.querySelectorAll( '.ciclegraph' ).forEach( ( ciclegraph )=>{
let circles = ciclegraph.querySelectorAll( '.circle' )
let angle = 360-90, dangle = 360 / circles.length
for( let i = 0; i < circles.length; ++i ){
let circle = circles[i]
angle += dangle
circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`
}
})
</script> </script>

2
podcast1.php
Unescape Escape View File

@ -258,6 +258,8 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>';
} }
} }
; ;
</script> </script>

26
styles/widescreen.css
Unescape Escape View File

@ -692,4 +692,30 @@ li, #angela, #judith, #laurie, #dana, #katalin {
width:49%; width:49%;
} }
/*players in circle*/
.ciclegraph {
position: relative;
width: 50%;
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 );
}
.ciclegraph .circle {
position: absolute;
top: 50%; left: 50%;
width: 20%;
/*height: 100px;*/
margin: calc( -100px / 2 );
}
/*}*/ /*}*/
Write Preview
Loading…
Cancel
Save