You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

371 lines
12 KiB
PHP

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1.4; letter-spacing: 1px;}
section {margin-bottom: 50px;margin-top: 50px;}
a {font-weight: bold; font-size: 24px; text-decoration: none; }
.list {
padding-top: 10px;
padding-bottom: 10px;
list-style: none;
border-top: 1px solid #47505e;
}
.description {
font-size: 12px;
float: right;
font-weight: normal !important;
}
/* .mini-player {
background-size: 100% 100%;
background-image: url(/project/images/player.png);
cursor: pointer;
}*/
.audio-mini {
width: 50px;
}
.dropbtn {
font-family: "Old Standard TT";
font-weight: bold;
font-size: 24px;
color: black;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: pink;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 1900px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: none;}
.show {display: block;}
.dropbtn2 {
font-family: "Old Standard TT";
font-weight: bold;
font-size: 24px;
color: black;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn2:hover, .dropbtn:focus {
background-color: pink;
}
.dropdown2 {
position: relative;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: white;
min-width: 1900px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content2 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown2 a:hover {background-color: none;}
.show2 {display: block;}
</style>
<body>
<h4 align="right">woman-in-the-middle-attack</h4>
<h4 align="right">...a space for Angeliki Diakrousi to unpack</h4>
<div style="position:absolute; bottom:0px;right:150px;">You can send me a message here angeliki@conversations.im</div>
<link style="text-align: top;" rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css">
<script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js" charset="utf-8"></script>
<script>
converse.initialize({
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
show_controlbox_by_default: false
});
</script>
<!-- menu dropdown -->
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
<li class="list">
<a href="project/about.html" target="_blank">About <div class="description">WHAT?</div></a>
</li>
<li class="list">
<a href="thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things <div class="description">THESIS, ANNOTATIONS</div></a>
</li>
<li class="list">
<a href="project/amplification.html" target="_blank">Amplification of female voices <div class="description">VOCAL EXERCISES, MEETINGS</div></a>
</li>
<li class="list">
<a href="../Grad_project proposal/1902_describe-soundwalks/West Rotterdam/leeszaal_repetition.html" target="_blank">Diary of West Rotterdam <div class="description">PROCESS, ARCHIVE</div></a>
</li>
<li class="list">
<a href="project/overlapping-interface.html" target="_blank">Feedback Composition <div class="description">SOUNDWALKS, ANNOTATIVE RECORDINGS</div></a>
</li>
</div>
</div>
<!-- internet resources -->
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">Internet sources</button>
<div id="myDropdown2" class="dropdown-content2">
<li class="list">
<a href="https://www.youtube.com/watch?v=HlvfPizooII" target="_blank">Angela Davis @Occupy Wall St </a>
</li>
<li class="list">
<a href="https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be" target="_blank">Judith Butler @Occupy Wall Street</a>
</li>
<li class="list">
<a href="https://www.youtube.com/watch?v=SirOxIeuNDE" target="_blank">Laurie Anderson - Mach 20</a>
</li>
<li class="list">
<a href="https://www.thisamericanlife.org/667/wartime-radio" target="_blank">Ballout, D. (2019) Good Morning, Kafranbel, This American Life: Wartime Radio</a>
</li>
</div>
</div>
<!-- <div style="position:absolute; top:30%; left:26%;">
<img src="thesis/carson-list.jpg"></img>
</div> -->
<div style="position:absolute; top:35%; left:41%;">
<audio controls class="audio-mini" style="background-color: tomato;" src="project/audio/leeszaal-meetings-warming.mp3"></audio>warming up @Leeszaal
</div>
<div style="position:absolute; top:32%; left:51%;">
<audio controls class="audio-mini" style="background-color: orange;" src="project/audio/leeszaal-meetings-choir.mp3"></audio>singing vowels @Leeszaal
</div>
<div style="position:absolute; top:40%; left:63%;">
<audio controls class="audio-mini" style="background-color: dodgerblue;" src="project/audio/description-alex2.mp3"></audio>describing/annotating
</div>
<div style="position:absolute; top:50%; left:70%;">
<audio controls class="audio-mini" style="background-color: mediumseagreen;" src="project/audio/finearts-meeting-discussion.mp3"></audio>discussing about voice in public @Fine Arts
</div>
<div style="position:absolute; top:62%; left:75%;">
<audio controls class="audio-mini" style="background-color: violet;" src="project/audio/leeszaal-meetings-transcribing.mp3"></audio>transcribing vowels @Leeszaal
</div>
<div style="position:absolute; top:75%; left:69%;">
<audio controls class="audio-mini" style="background-color: orange;" src="project/audio/finearts-meeting-choir.mp3"></audio>singing vowels @Fine Arts
</div>
<div style="position:absolute; top:85%; left:63%;">
<audio controls class="audio-mini" style="background-color: greenyellow;" src="project/audio/selectionB.mp3"></audio>city sounds
</div>
<div style="position:absolute; top:90%; left:53%;">
<audio controls class="audio-mini" style="background-color: dodgerblue;" src="project/audio/description-eugenie-CUT-SHORT.mp3"></audio>describing/annotating
</div>
<div style="position:absolute; top:77%; left:33%;;">
<audio controls class="audio-mini" style="background-color: orange;" src="project/audio/finearts-meeting-choirhigh.mp3"></audio>singing vowels (high) @Fine Arts
</div>
<div style="position:absolute; top:53%; left:26%;;">
<audio controls class="audio-mini" style="background-color: dodgerblue;" src="project/audio/description-lidia-CUT.mp3"></audio>describing/annotating
</div>
<div style="position:absolute; top:66%; left:28%;;">
<audio controls class="audio-mini" style="background-color: mediumseagreen;" src="project/audio/leeszaal-meetings-discussion.mp3"></audio>discussing about voice in public @Leeszaal
</div>
<div style="position:absolute; top:86%; left:41%;;">
<audio controls class="audio-mini" style="background-color: tomato;" src="project/audio/finearts-meeting-warming.mp3"></audio>warming up @Fine Arts
</div>
<div style="position:absolute; top:43%; left:32%;">
<audio controls class="audio-mini" style="background-color: violet;" src="project/audio/finearts-meeting-transcribing.mp3"></audio>transcribing vowels @Fine Arts
</div>
<div style="position:absolute; top:47%; left:29%;">
<audio controls style="background-color: violet;" src="project/audio/finearts-meeting-extracts.mp3"></audio>reading extracts @Fine Arts
</div>
<section style="margin-top: 450px !important;">
<button>
make your own podcast
</button>
<div>latest episode</div>
<?php
//insert the folder HERE
$files = scandir("project/podcasts", SCANDIR_SORT_DESCENDING);
$newest_file = $files[0];
echo "<audio controls src='project/podcasts/$newest_file'></audio>";
?>
</section>
<?php
if(!is_dir("recordings")){
$res = mkdir("recordings",0777);
}
// pull the raw binary data from the POST array
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
$filename = urldecode($_POST['fname']);
// write the data out to the file
$fp = fopen('recordings/'.$filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
?>
<script>
function uploadAudio(mp3Data){
var reader = new FileReader();
reader.onload = function(event){
var fd = new FormData();
var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
console.log("mp3name = " + mp3Name);
fd.append('fname', mp3Name);
fd.append('data', event.target.result);
$.ajax({
type: 'POST',
url: 'upload.php',
data: fd,
processData: false,
contentType: false
}).done(function(data) {
//console.log(data);
log.innerHTML += "\n" + data;
});
};
reader.readAsDataURL(mp3Data);
}
</script>
<!-- <audio controls autoplay></audio>
<script type="text/javascript" src="recorder.js"> </script>
<fieldset><legend>RECORD AUDIO</legend>
<input onclick="startRecording()" type="button" value="start recording" />
<input onclick="stopRecording()" type="button" value="stop recording and play" />
</fieldset>
<script>
var onFail = function(e) {
console.log('Rejected!', e);
};
var onSuccess = function(s) {
var context = new webkitAudioContext();
var mediaStreamSource = context.createMediaStreamSource(s);
recorder = new Recorder(mediaStreamSource);
recorder.record();
// audio loopback
// mediaStreamSource.connect(context.destination);
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var recorder;
var audio = document.querySelector('audio');
function startRecording() {
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true}, onSuccess, onFail);
} else {
console.log('navigator.getUserMedia not present');
}
}
function stopRecording() {
recorder.stop();
recorder.exportWAV(function(s) {
audio.src = window.URL.createObjectURL(s);
});
}
</script> -->
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}
// Close the dropdown if the user clicks outside of it
window.onclick2 = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show2')) {
openDropdown.classList.remove('show2');
}
}
}
}
</script>
</body>
</html>