added and edited podcast1,2,3
parent
7bfc94050c
commit
8ec6f99a70
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
@ -0,0 +1,187 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar">
|
||||
<a href="podcast1.php">Podcast1 </a>
|
||||
<a href="podcast2.php" class="active">Podcast2 </a>
|
||||
<a href="podcast3.php">Podcast3 </a>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>
|
||||
"Voice's Transition"
|
||||
</h3>
|
||||
|
||||
|
||||
<table><tr>
|
||||
<?php
|
||||
$files = glob("podcasts/podcast2/*.mp3");
|
||||
for ($i=0; $i<count($files); $i++)
|
||||
{$num = $files[$i];
|
||||
$var1 = $_GET["files"]["name"];
|
||||
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down" style="min-width:1100px;>';include $num.'.txt';
|
||||
echo '</div><p style="font-size:14px;line-height:1;text-align: left;">';
|
||||
include $num.'-METADATA.txt';
|
||||
echo '</p></div></td>'; } ?>
|
||||
</tr></table>
|
||||
|
||||
<br>
|
||||
|
||||
<div align="center">
|
||||
<div style="width: 500px;border:1px red;border-style: dashed;padding: 10px;">
|
||||
<p>Dear listener,</p>
|
||||
<p>you are invited to amplify parts of the podcasts that you find interesting by repeating/recording them or annotate them with your vocal comments </p>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<section style="float:right;">
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 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);
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 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);
|
||||
}}
|
||||
|
||||
|
||||
// <!-- 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>
|
||||
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,188 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar">
|
||||
<a href="podcast1.php">Podcast1 </a>
|
||||
<a href="podcast2.php">Podcast2 </a>
|
||||
<a href="podcast3.php" class="active">Podcast3 </a>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>
|
||||
"Blocking our Voices"
|
||||
</h3>
|
||||
|
||||
|
||||
|
||||
<table><tr>
|
||||
<?php
|
||||
$files = glob("podcasts/podcast3/*.mp3");
|
||||
for ($i=0; $i<count($files); $i++)
|
||||
{$num = $files[$i];
|
||||
$var1 = $_GET["files"]["name"];
|
||||
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down" style="min-width:1100px;>';include $num.'.txt';
|
||||
echo '</div><p style="font-size:14px;line-height:1;text-align: left;">';
|
||||
include $num.'-METADATA.txt';
|
||||
echo '</p></div></td>'; } ?>
|
||||
</tr></table>
|
||||
|
||||
<br>
|
||||
|
||||
<div align="center">
|
||||
<div style="width: 500px;border:1px red;border-style: dashed;padding: 10px;">
|
||||
<p>Dear listener,</p>
|
||||
<p>you are invited to amplify parts of the podcasts that you find interesting by repeating/recording them or annotate them with your vocal comments </p>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<section style="float:right;">
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 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);
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 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);
|
||||
}}
|
||||
|
||||
|
||||
// <!-- 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>
|
||||
|
||||
</html>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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
|
||||
|
||||
@ -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>
|
||||
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue