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

it works! recorder and save in my server

Browse Source
master
Angeliki 6 years ago
parent 031e5a23bf
commit a34682e80d
13 changed files with 36 additions and 61 deletions
Show Stats Download Patch File Download Diff File

10
index.php
Unescape Escape View File

@ -10,13 +10,13 @@
--> -->
</head> </head>
<body> <body>
<h4 align="right">This is (the unfolding/overlayering of) an<span style="font-size:50"> audio zine</span> on amplification of female and collective voices. Author/Narrator: Angeliki Diakrousi</h4> <h4 align="right">This is an<span style="font-size:50"> audio zine</span> on amplification of female and collective voices. Author/Narrator: Angeliki Diakrousi</h4>
<!-- (the unfolding/overlayering of) -->
<div class="tab"> <div class="tab">
<button class="tablinks" style="position: absolute;font-size: 28px;margin-right: 90%; padding: 8px !important; border: none !important; margin-top: 0% !important;" onclick="openCity(event, 'about')">About</button> <button class="tablinks" style="position: absolute;font-size: 28px;margin-right: 90%; padding: 8px !important; border: none !important; margin-top: 0% !important;" onclick="openCity(event, 'about')">About</button>
</div> </div>
<div id="about" class="tabcontent" style="font-size: 28px !important; left: 5px !important; top: 300px !important; width: 1000px !important;padding: 0px !important;"> <div id="about" class="tabcontent" style="font-size: 28px !important; left: 5px !important; top: 350px !important; width: 1000px !important;padding: 0px !important;">
<span onclick="this.parentElement.style.display='none'" class="topleft">&times</span> <span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>
It is a collection of audio recordings coming from meetings I co-organised, internet sources, podcasts and soundwalks. 'Revisiting podcasts' questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">a set of podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>that revisit the sound material produced in situated amplification meetings and soundwalks. Every podcast includes the previous one, on a way that creates repetetive layers of the same material. Creating presence by repetetion.'Revisiting podcasts' are upsetting binaries such as male/female, expert/amateur, rational/irrational It is a collection of audio recordings coming from meetings I co-organised, internet sources, podcasts and soundwalks. 'Revisiting podcasts' questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">a set of podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>that revisit the sound material produced in situated amplification meetings and soundwalks. Every podcast includes the previous one, on a way that creates repetetive layers of the same material. Creating presence by repetetion.'Revisiting podcasts' are upsetting binaries such as male/female, expert/amateur, rational/irrational
@ -61,7 +61,7 @@
<div class="tab"> <div class="tab">
<button class="tablinks" style="position: absolute;font-size: 28px !important;margin-right: 90%; padding: 8px !important;margin-top: 4% !important;" onclick="openCity(event, 'menu')">Dive Into</button> <button class="tablinks" style="position: absolute;font-size: 28px !important;margin-right: 90%; padding: 8px !important;margin-top: 4% !important;" onclick="openCity(event, 'menu')">Dive Into</button>
</div> </div>
<div id="menu" class="tabcontent" style="font-size: 28px !important; left: 5px !important; top: 300px !important; width: 1000px !important;padding: 0px !important;"> <div id="menu" class="tabcontent" style="font-size: 28px !important; left: 5px !important; top: 350px !important; width: 1000px !important;padding: 0px !important;">
<span onclick="this.parentElement.style.display='none'" class="topleft">&times</span> <span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>
<ul> <ul>
<li class="list" style="border-top: none !important;"> <li class="list" style="border-top: none !important;">
@ -93,7 +93,7 @@
</section> </section>
<div style="position:absolute; top:20%; left:26%;"> <div style="position:absolute; top:20%; left:26%;">
<img src="texts/thesis/carson-list.jpg" width="100%"></img> <div class="tooltip-wrap" style="text-decoration:underline;"> <img src="texts/thesis/carson-list.jpg" width="100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div>
</div> </div>
<script> <script>

82
podcast1.php
Unescape Escape View File

@ -40,12 +40,12 @@ echo '</p></div></td>'; } ?>
<div align="center"> <div align="center">
<div style="width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <div style="width: 500px;border:1px red;border-style: dashed;padding: 10px;">
<p>Dear listener,</p> <p>Dear listener,</p>
<p>you are invited to amplify parts of the podcasts that you find interesting by repeating them or annotate them with your vocal messages. You can listen to the podcasts with headphones and record with any microphone. </p> <p>you are invited to amplify parts of the podcasts that you find interesting by repeating or annotate them with your vocal messages. You can listen to the podcasts with headphones and record with any microphone. </p>
<!-- keep the time of file limited --> <!-- keep the time of file limited -->
</div>
<!-- https://github.com/mdn/web-dictaphone/ --> <!-- https://github.com/mdn/web-dictaphone/ -->
<div class="wrapper"> <!-- <div class="wrapper">
<section class="main-controls"> <section class="main-controls">
<canvas class="visualizer" height="60px"></canvas> <canvas class="visualizer" height="60px"></canvas>
<div id="buttons"> <div id="buttons">
@ -55,14 +55,17 @@ echo '</p></div></td>'; } ?>
</section> </section>
<section class="sound-clips"> <section class="sound-clips">
</section> </section>
</div> </div> -->
</div>
<!-- voice visualizer/LICENSE web dictaphone -->
<!-- recorder -->
<div class="recorder"> <div class="recorder">
<input type="button" class="start" value="Record" /> <input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" /> <input type="button" class="stop" value="Stop" />
<pre class="status"></pre> <pre class="status"></pre>
</div> </div>
<div><button onclick="upload()">Upload</button></div> <div><button onclick="upload()">Upload</button></div>
@ -71,72 +74,41 @@ echo '</p></div></td>'; } ?>
<div id="dataUrlcontainer" hidden></div> <div id="dataUrlcontainer" hidden></div>
<pre id="log"></pre> <pre id="log" hidden></pre>
</div>
<audio controls="true" id="audio" src=""></audio> <br />
<br />
<div id="dataUrlcontainer" hidden></div> <br />
<section style="float:right;">
<!-- scripts for dictaphone -->
<script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script>
<!-- Below is your custom application script -->
<script src="scripts/app.js"></script>
<?php
$files = glob("uploads/*.wav");
for ($i=0; $i<count($files); $i++)
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<audio src='.$num.' controls></audio><br /><br />'; }
?>
</div>
<script>
function saveAudio(){
var req = null;
var url = "savefile.php";
var data = document.getElementById("save").href.toString();// document.getElementById("save").innerHTML;// = xhttp.responseText;; // you have to check how to get the data from your saveAudio() method
window.alert(data);
(window.XMLHttpRequest) ? req = new XMLHttpRequest() : (window.ActiveXObject) ? req = new ActiveXObject("Microsoft.XMLHTTP") : req = false;
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "multipart/form-data");
if(data != null) //&& data != "")
{
req.setRequestHeader("Content-length", data.length);
req.send(data);
}}
// <!-- attempt to save the new recordings -->
<?php
$save_folder = dirname(__FILE__) ."/js";
if(! file_exists($save_folder)) {
if(! mkdir($save_folder)) {
die("failed to create save folder $save_folder");
}
}
$key = 'filename'; <!-- scripts for dictaphone -->
$tmp_name = $_FILES["audiofile"]["tmp_name"]; <!-- <script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script> -->
$upload_name = $_FILES["audiofile"]["name"];
$type = $_FILES["audiofile"]["type"];
$filename = "$save_folder/$upload_name";
$saved = 0;
if(($type == 'audio/x-wav' || $type == 'application/octet-stream') && preg_match('/^[a-zA-Z0-9_\-]+\.wav$/', $upload_name) ) {
$saved = move_uploaded_file($tmp_name, $filename) ? 1 : 0; <!-- Below is your custom application script -->
} <!-- <script src="scripts/app.js"></script> -->
//name is needed to send in the php file
?>
</script>
<!-- script for subs and sound --> <!-- script for subs and sound -->
@ -214,7 +186,7 @@ if(($type == 'audio/x-wav' || $type == 'application/octet-stream') && preg_match
var au = document.createElement('audio'); var au = document.createElement('audio');
document.getElementById("playerContainer").innerHTML = ""; document.getElementById("playerContainer").innerHTML = "";
//console.log(url) // console.log(url)
var duc = document.getElementById("dataUrlcontainer"); var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url; duc.innerHTML = url;

BIN
podcasts/podcast1/podcast-20190501-1223.mp3
View File

Binary file not shown.

2
podcasts/podcast1/podcast-20190501-1223.mp3-METADATA.txt
Unescape Escape View File

@ -0,0 +1,2 @@
<br><b>sample_rate</b>: 44100<br><b>duration</b>: 11606630400<br><b>title</b>: Channeling Speech<br><b>narrator</b>: angeliki<br><b>topic</b>: transcribing, translating, human microphone, mediating each other's speech</li></ul><br><b>filename</b>: podcasts/podcast.20190507-1129.mp3<br><b>format_name</b>: mp3<br><b>size</b>: 13159847

1
podcasts/podcast1/podcast-20190501-1223.mp3.txt
Unescape Escape View File

@ -0,0 +1 @@
<div id="transcriptWrapper" class='sub'><div id="transcript"><div><a data-start="10.56" href="#">00:00:10,560</a> A woman speaks in Indonesian</div><div><a data-start="24.38" href="#">00:00:24,380</a> Another woman responds back to her</div><div><a data-start="28.36" href="#">00:00:28,360</a> By repeating only the vowels of what the previous woman said</div><div><a data-start="58.4" href="#">00:00:58,400</a> This process continues to more people that are gathered together in a circle at Leeszaal</div><div><a data-start="115.26" href="#">00:01:55,260</a> A woman once told me</div><div><a data-start="120.62" href="#">00:02:00,620</a> That when she was a child</div><div><a data-start="124.98" href="#">00:02:04,980</a> She would speak to her mother in Dutch and her mother would reply back to her in Surinamese</div><div><a data-start="134.7" href="#">00:02:14,700</a> Their communication would go on like that</div><div><a data-start="138.94" href="#">00:02:18,940</a> The child was like a channel</div><div><a data-start="142.72" href="#">00:02:22,720</a> Like also her mother. The one would refuse to talk in one common language to the other.</div><div><a data-start="152.62" href="#">00:02:32,620</a> But this process of translation happening inside their head...</div><div><a data-start="160.1" href="#">00:02:40,100</a> is mediating and filtrating their speech through each others bodies</div><div><a data-start="188.24" href="#">00:03:08,240</a> In ancient medical and anatomical theory women have two mouths, the upper and the lower, connected through neck</div><div><a data-start="209.72" href="#">00:03:29,720</a> The lips of both these mouths guarded a hollow cavity and they had to remain closed</div><div><a data-start="218.52" href="#">00:03:38,520</a> Having two mouths that speak simultaneously is confusing and embarrassing and this creates cacophony</div><div><a data-start="229.32" href="#">00:03:49,320</a> Females were expressing something directly when it should have been said indirectly</div><div><a data-start="294.9" href="#">00:04:54,900</a> In the end of this process this group of people sang together all the vowels they had transcribed</div><div><a data-start="309.46" href="#">00:05:09,460</a> With a small delay of synchronization they tried to sing at the same time</div><div><a data-start="337.58" href="#">00:05:37,580</a> In Ancient Greece there was a high-pitch utterance of women , called ololyga...</div><div><a data-start="347.56" href="#">00:05:47,560</a> which was a ritual practice dedicated to important events in life...</div><div><a data-start="355.02" href="#">00:05:55,020</a> such as like the birth of a child or the death of a person...</div><div><a data-start="360.7" href="#">00:06:00,700</a> and this was considered a pollution for civic space</div><div><a data-start="393.46" href="#">00:06:33,460</a> If expressed in public they would create chaos and provoke madness</div><div><a data-start="427.46" href="#">00:07:07,460</a> Here you listen Angela Davis speak in Occupy Wall Street</div><div><a data-start="452.4" href="#">00:07:32,400</a> People here act like a human microphone. They repeat all together what Angela Davis says...</div><div><a data-start="462.88" href="#">00:07:42,880</a> in order she could be heard more far away in the square...</div><div><a data-start="473.26" href="#">00:07:53,260</a> in order to amplify her voice, because amplification devices were not permitted</div><div><a data-start="481.82" href="#">00:08:01,820</a> Vowels allow us to occupy space</div><div><a data-start="483.82" href="#">00:08:03,820</a> Vowels vibrate us</div><div><a data-start="485.82" href="#">00:08:05,820</a> Vowels is the common space between our languages</div><div><a data-start="486.68" href="#">00:08:06,680</a> A similar example with Judith Butler speaking in Occupy Wall Street Vowels is the common space between our languages</div><div><a data-start="487.82" href="#">00:08:07,820</a> Vowels make us louder and bigger A similar example with Judith Butler speaking in Occupy Wall Street</div><div><a data-start="489.16" href="#">00:08:09,160</a> Vowels make us louder and bigger</div></div></div>

2
styles/stylesheet.css
Unescape Escape View File

@ -300,7 +300,7 @@ cursor: pointer;
left: 2%; left: 2%;
/*right: 100%;*/ /*right: 100%;*/
padding: .2em; padding: .2em;
background-color: rgba(255, 255, 255, 0.93) ; background-color: rgba(255, 255, 255, 0.8) ;
border:1px; border:1px;
border-style:solid; border-style:solid;
border-color:black; border-color:black;

BIN
uploads/5ce308229f0a9.wav
View File

Binary file not shown.

BIN
uploads/5ce30d7169d6e.wav
View File

Binary file not shown.

0
uploads/5ce313890aebe.wav
Unescape Escape View File

BIN
uploads/5ce3138d3a548.wav
View File

Binary file not shown.

0
uploads/5ce313d4e7950.wav
Unescape Escape View File

BIN
uploads/5ce314b4303ed.wav
View File

Binary file not shown.

BIN
uploads/5ce3150faeaf7.wav
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save