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

edit tooltip in podcast1

Browse Source
master
Angeliki 6 years ago
parent 92a796c1bc
commit 91f3dff367
4 changed files with 155 additions and 357 deletions
Show Stats Download Patch File Download Diff File

340
index.php
Unescape Escape View File

@ -7,19 +7,15 @@
-->
</head>
<body>
<h4 align="right">...a space for Angeliki Diakrousi to unpack thoughts and sounds on amplification and collective voices</h4>
<h4 align="right">This is (the unfloding of) an<span style="font-size:50"> audio zine</span> on amplification of female and collective voices</h4>
<!-- menu -->
<table>
<tr>
<td>
<!-- menu dropdown -->
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">?</button>
<div id="myDropdown" class="dropdown-content">
<li class="list">
<a href="about.html" target="_blank">About <div class="description">WHAT?</div></a>
</li>
<div align="left">
<div class="tooltip-wrap">
<p style="font-size: 28px;">?</p>
<div class="tooltip-content-down" style="font-size: 28px;min-width: 1800px;">
<div>
<li class="list">
<a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things <div class="description">THESIS, ANNOTATIONS</div></a>
@ -39,112 +35,15 @@
</li>
</div>
</div>
</td>
<td width="100%">
</div>
<div class="tooltip-wrap">
<h2>About</h2>
<p style="font-size: 28px;">About</p>
<div class="tooltip-content-down" style="font-size: 28px;max-width: 1000px;">
'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 a set of podcasts 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
</div>
</div>
</td>
</tr>
</table>
<br>
<div align="center">This is an<span style="font-size:50"> audio zine</span> on amplification of female and collective voices</div>
<!-- latest podcast -->
<section style="float:right;">
<div class="tooltip-wrap">
Listen to the latest podcast:
<div class="tooltip-content-down">
<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></div>
</div>
<?php
//insert the folder HERE
$files = scandir("podcasts", SCANDIR_SORT_DESCENDING);
$newest_file = $files[0];
echo "<audio id='a2' controls ontimeupdate='playTranscript()' src='podcasts/$newest_file'></audio>";
?>
<br><div style="font-size:12px;"><b>sample_rate</b>: 44100<br><b>duration</b>: 534.857143<br><b>title</b>: transformation for presence<br><b>narrator</b>: angeliki<br><b>topic</b>: female voice to male</li></ul><br><b>filename</b>: podcasts/podcast.20190501-1223-femalemale.mp3<br><b>format_name</b>: mp3<br><b>size</b>: 8558073</div>
<!-- links from all the podcasts from the directory -->
<!-- <div class="dropdown3">
<button onclick="myFunction3()" class="dropbtn3">Internet sources</button>
<div id="myDropdown3" class="dropdown-content3">
<?php
$files = glob("podcasts/*.*");
for ($i=1; $i<count($files); $i++)
{ $num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<li style="list-style: none;"><a class="internet" href='.$num.'>'.$num.'</a></li>';
}?>
</div>
</div> -->
<br>
<label for="selection">Listen:</label>
<br>
<select id="selection">
<option value="">- Select podcast -</option>
<?php
$files = glob("podcasts/*.*");
for ($i=1; $i<count($files); $i++)
{ $num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<option id="playlist" value="'.$num.'">'.$num.'</option>';
}?>
</select>
<br>
@ -154,225 +53,6 @@ for ($i=1; $i<count($files); $i++)
<img src="texts/thesis/carson-list.jpg"></img>
</div>
<!-- https://github.com/mdn/web-dictaphone/ -->
<div class="wrapper">
<section class="main-controls">
<canvas class="visualizer" height="60px"></canvas>
<div id="buttons">
<button class="record">Record</button>
<button class="stop">Stop</button>
</div>
</section>
<section class="sound-clips">
</section>
</div>
<?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>
<!-- scripts for dictaphone -->
<script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script>
<!-- Below is your custom application script -->
<script src="scripts/app.js"></script>
<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);
}}
</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>
<?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';
$tmp_name = $_FILES["audiofile"]["tmp_name"];
$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;
}
//name is needed to send in the php file
?>
</body>

119
podcast1.php
Unescape Escape View File

@ -9,6 +9,18 @@
<h2>Podcast 1: Mediating speech</h2>
<h3 align="center">Episodes & Metadata</h3>
<?php
$files = glob("podcasts/*.*.mp3"); for ($i=1; $i<count($files); $i++) { $num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<div class="tooltip-wrap" align="center"><audio src='.$num.' controls></audio><div class="tooltip-content-down" style="max-width:1000px;">';include("texts/podcast-transcription.txt");
echo '</div></div>'."<br /><br />"; } ?>
<!-- https://github.com/mdn/web-dictaphone/ -->
<div class="wrapper">
<section class="main-controls">
@ -22,21 +34,35 @@
</section>
</div>
<h3 align="center">Episodes</h3>
<section style="float:right;">
<h3 align="right">Metadata</h3>
<!-- save the new recordings -->
<?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);
?>
$files = glob("podcasts/*.*.mp3"); for ($i=1; $i<count($files); $i++) { $num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<div class="tooltip-wrap" align="center"><audio src='.$num.' controls></audio><div class="tooltip-content-down" align="center">anything</div></div>'."<br /><br />"; } ?>
<!-- scripts for dictaphone -->
<script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script>
<!-- Below is your custom application script -->
<script src="scripts/app.js"></script>
<!-- Below is your custom application script -->
<script src="scripts/app.js"></script>
<script>
function saveAudio(){
@ -55,8 +81,87 @@ if(data != null) //&& data != "")
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';
$tmp_name = $_FILES["audiofile"]["tmp_name"];
$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;
}
//name is needed to send in the php file
?>
</script>
<!-- save recordings -->
<!-- <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> -->
<!-- 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>
</body>

14
styles/stylesheet.css
Unescape Escape View File

@ -14,6 +14,12 @@ button {width: 100px;}
}
.internet {font-weight: regular; font-size: 18px; text-decoration: none; }
.list a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.list {
padding-top: 10px;
padding-bottom: 10px;
@ -276,6 +282,7 @@ cursor: pointer;
border:1px;
border-style:solid;
border-color:black;
text-align: left;
}
@ -292,6 +299,7 @@ cursor: pointer;
border:1px;
border-style:solid;
border-color:black;
text-align: left;
}
.tooltip-wrap:hover .tooltip-content-down {
@ -301,6 +309,10 @@ cursor: pointer;
display: block;
}
/*.tooltip-wrap:hover {
background-color: pink;
}
*/
/*transcript wrapper,text following audio style*/
@ -330,7 +342,7 @@ cursor: pointer;
/*one image next to the other*/
.column {
float: left;
width: 50%;
width: 30%;
padding: 5px;
}

1
texts/podcast-transcription.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>
Write Preview
Loading…
Cancel
Save