menu more clear and other details
parent
17af044395
commit
44f34679a5
@ -0,0 +1,299 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
|
||||
<link href="styles/widescreen.css" rel="stylesheet" type="text/css">
|
||||
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
|
||||
<title>Podcast1</title>
|
||||
<link rel="shortcut icon" href="images/headphones_logo.png" />
|
||||
<style>
|
||||
h3 {font-weight: normal !important}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #A19696;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- draggable -->
|
||||
<br><br>
|
||||
<h1 id="box-title" style="left: 45%; position: absolute;">
|
||||
Mediating Speech
|
||||
</h1>
|
||||
|
||||
|
||||
<!-- draggable menu-->
|
||||
<div class="draggable scaleable-wrapper menu" style="top: 110%; right: 3%;">
|
||||
<h2><a href="amplification.php">Amplification of female voices</a></h2>
|
||||
<div class="drag-content">
|
||||
(workshops)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="draggable scaleable-wrapper menu" style="top: 130%; right: 7%;">
|
||||
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
|
||||
<div class="drag-content">
|
||||
(first experiments)
|
||||
</div>
|
||||
</div>
|
||||
<div class="draggable scaleable-wrapper menu" style="top: 90%; right: 5%;">
|
||||
<h2 ><a href="player.php">Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
|
||||
<div class="drag-content">
|
||||
(audio archive)
|
||||
</div>
|
||||
</div>
|
||||
<div class="draggable scaleable-wrapper menu" style="top: 83%; left: 2%;">
|
||||
<h2 ><a href="index.php">About</a></h2>
|
||||
<div class="drag-content">
|
||||
(main page)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
|
||||
<h2 ><a class="active" href="podcast1.php">Podcast1</a></h2>
|
||||
<div class="drag-content">
|
||||
<?php include 'texts/podcast1.txt'; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="draggable scaleable-wrapper menu" style="top: 34%; right: 5%">
|
||||
<h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
|
||||
</div>
|
||||
<div class="draggable scaleable-wrapper menu" style="top: 44%; right: 3%">
|
||||
<h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
|
||||
</div>
|
||||
<div class="draggable scaleable-wrapper menu" style="top: 53%; right: 8%">
|
||||
<h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="draggable scaleable-wrapper menu" style="top: 110%; left: 1%;">
|
||||
<h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
|
||||
<div class="drag-content">
|
||||
(thesis)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br><br><br><br><br>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><h3 style="text-align: left !important">EPISODES</h3></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="images/headphones_logo.png" width="40px"></td>
|
||||
<?php
|
||||
$files = glob("podcasts/podcast1/*.mp3");
|
||||
for ($i=0; $i<count($files); $i++)
|
||||
{$num = $files[$i];
|
||||
$var1 = $_GET["files"]["name"];
|
||||
echo '<td><audio src='.$num.' controls></audio>';
|
||||
echo '<div class="tooltip-wrap" style="left:1%; top:-10px;"><img src="images/plus-icon.png" width="20px"><div class="tooltip-content-down content-transcription"><div class="left_col"><h3>NARRATOR</h3>';include $num.'.txt';
|
||||
echo '</div><div class="right_col"><h3>SPEAKERS</h3>'; include $num.'-M.txt';
|
||||
echo '</div></div></div>';
|
||||
echo '<div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
|
||||
include $num.'-METADATA.txt';
|
||||
echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
|
||||
|
||||
</tr></table>
|
||||
|
||||
<br>
|
||||
|
||||
<div align="center">
|
||||
<?php include 'texts/dear_listener.txt'; ?>
|
||||
|
||||
<!-- recorder -->
|
||||
<div class="recorder">
|
||||
<input type="button" class="start" value="Record" />
|
||||
<input type="button" class="stop" value="Stop" />
|
||||
<pre class="status"></pre>
|
||||
</div>
|
||||
|
||||
<div id="playerContainer"></div>
|
||||
<br />
|
||||
<div><button id="button_upload" onclick="upload()">Upload</button></div>
|
||||
<br />
|
||||
<div id="saved_msg"></div>
|
||||
|
||||
|
||||
<div id="dataUrlcontainer" hidden></div>
|
||||
<pre id="log" hidden></pre>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<h3>VISITORS' RECORDINGS</h3><br />
|
||||
<?php
|
||||
$files = glob("uploads/1/*");
|
||||
for ($i=0; $i<count($files); $i++)
|
||||
{$num = $files[$i];
|
||||
$var1 = $_GET["files"]["name"];
|
||||
echo '<audio src='.$num.' controls></audio><br />';
|
||||
// echo '<div id="name"></div>';
|
||||
echo date("d/m/Y",filemtime($num)).'<br /><br />'; }
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button onclick="myFunction()">Click me</button>
|
||||
|
||||
<p id="demo"></p>
|
||||
|
||||
<script>
|
||||
function myFunction() {
|
||||
document.getElementById("demo").innerHTML = "Hello World";
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="js/mp3recorder.js"></script>
|
||||
|
||||
<script src="js/draggable.js"></script>
|
||||
<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/main.js"></script>
|
||||
<!-- scripts for recorder -->
|
||||
<script type="text/javascript">
|
||||
var audio_context;
|
||||
|
||||
function __log(e, data) {
|
||||
log.innerHTML += "\n" + e + " " + (data || '');
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
try {
|
||||
// webkit shim
|
||||
window.AudioContext = window.AudioContext || window.webkitAudioContext;
|
||||
navigator.getUserMedia = ( navigator.getUserMedia ||
|
||||
navigator.webkitGetUserMedia ||
|
||||
navigator.mozGetUserMedia ||
|
||||
navigator.msGetUserMedia);
|
||||
window.URL = window.URL || window.webkitURL;
|
||||
|
||||
var audio_context = new AudioContext;
|
||||
__log('Audio context set up.');
|
||||
__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
|
||||
} catch (e) {
|
||||
alert('No web audio support in this browser!');
|
||||
}
|
||||
|
||||
$('.recorder .start').on('click', function() {
|
||||
$this = $(this);
|
||||
$recorder = $this.parent();
|
||||
|
||||
navigator.getUserMedia({audio: true}, function(stream) {
|
||||
var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' });
|
||||
$recorder.data('recorderObject', recorderObject);
|
||||
|
||||
recorderObject.start();
|
||||
}, function(e) { });
|
||||
});
|
||||
|
||||
document.getElementById("button_upload").style.display='none';
|
||||
|
||||
$('.recorder .stop').on('click', function() {
|
||||
$this = $(this);
|
||||
$recorder = $this.parent();
|
||||
|
||||
recorderObject = $recorder.data('recorderObject');
|
||||
recorderObject.stop();
|
||||
|
||||
recorderObject.exportMP3(function(base64_data) {
|
||||
var url = 'data:audio/mp3;base64,' + base64_data;
|
||||
var au = document.createElement('audio');
|
||||
|
||||
document.getElementById("playerContainer").innerHTML = "";
|
||||
// console.log(url)
|
||||
document.getElementById("button_upload").style.display='block';
|
||||
|
||||
var duc = document.getElementById("dataUrlcontainer");
|
||||
duc.innerHTML = url;
|
||||
|
||||
au.controls = true;
|
||||
au.src = url;
|
||||
//$recorder.append(au);
|
||||
$('#playerContainer').append(au);
|
||||
|
||||
|
||||
recorderObject.logStatus('');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
function upload(){
|
||||
|
||||
var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "scripts/uploadMp3_1.php",
|
||||
data: {
|
||||
base64: dataURL
|
||||
}
|
||||
}).done(function(o) {
|
||||
console.log('saved');
|
||||
document.getElementById("saved_msg").innerHTML = "Saved '*|o.o/*' You can now refresh and see your voice message in the list below :<";
|
||||
|
||||
});
|
||||
|
||||
|
||||
// var person = prompt("Please enter a title or a name");
|
||||
// if (person != null) {
|
||||
// document.getElementById("name").innerHTML =
|
||||
// person;
|
||||
}
|
||||
|
||||
// }
|
||||
|
||||
</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>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
This is a documentation of a series of meetings/workshops I am organising together with Christina Karagianni. Our intentions come from personal experiences and we seek to explore the silencing of excluded voices, and go beyond their barriers. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- in moments of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a>, an open local library, a public space of diversity. How can we engage politically with the exclusion of specific voices from the public sphere? We are borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. <div class="tooltip-wrap">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. The produced material is being included in an audio archive, <div class="tooltip-wrap">player.<div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes? web-audio, recordings</div></div></div>
|
||||
This is a documentation of a series of meetings/workshops I am organising together with Christina Karagianni. Our intentions come from personal experiences and we seek to explore the silencing of excluded voices, and go beyond their barriers. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- in moments of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a>, an open local library, a public space of diversity. How can we engage politically with the exclusion of specific voices from the public sphere? We are borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. <div class="tooltip-wrap">We invite <div class="tooltip-content-right" ><div>during the workshops we've realised that we should reconsider the terms female/male and how to refer to those voices when inviting people</div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. The produced material is being included in an audio archive, <div class="tooltip-wrap">player.<div class="tooltip-content-right" ><div></div></div></div>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue