|
|
|
|
<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/stylesheet.css" rel="stylesheet" type="text/css">
|
|
|
|
|
<title>Podcast4</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- draggable -->
|
|
|
|
|
<br><br>
|
|
|
|
|
<h3 id="box-title" style="width: 360px; left: 42.5%; position: absolute;">
|
|
|
|
|
"City Sounds Reveal Voice Binaries"
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
|
|
<!-- draggable menu-->
|
|
|
|
|
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;">
|
|
|
|
|
<h2><a href="amplification.html">Amplification of female voices</a></h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;">
|
|
|
|
|
<h2 ><a href="">Diary of West Rotterdam</a></h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;">
|
|
|
|
|
<h2 ><a href="player.html">Player</a></h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;">
|
|
|
|
|
<h2 ><a href="index.php">About</a></h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;">
|
|
|
|
|
<h2 ><a href="podcast4.php">Podcast4</a></h2>
|
|
|
|
|
<div class="drag-content">
|
|
|
|
|
<?php include 'texts/podcast4.txt'; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 220px; right: 10px;">
|
|
|
|
|
<h2 ><a href="podcast1.php">Podcast1</a></h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;">
|
|
|
|
|
<h2 ><a href="podcast2.php">Podcast2</a></h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;">
|
|
|
|
|
<h2 ><a href="podcast3.php">Podcast3</a></h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;">
|
|
|
|
|
<h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<br><br><br><br><br><br>
|
|
|
|
|
<table><tr>
|
|
|
|
|
<?php
|
|
|
|
|
$files = glob("podcasts/podcast4/*.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">';include $num.'.txt';
|
|
|
|
|
echo '</div><br /><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></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>
|
|
|
|
|
</div>
|
|
|
|
|
<br />
|
|
|
|
|
<br />
|
|
|
|
|
<br />
|
|
|
|
|
|
|
|
|
|
<?php
|
|
|
|
|
$files = glob("uploads/4/*");
|
|
|
|
|
for ($i=0; $i<count($files); $i++)
|
|
|
|
|
{$num = $files[$i];
|
|
|
|
|
$var1 = $_GET["files"]["name"];
|
|
|
|
|
echo '<audio src='.$num.' controls></audio><br /><br />'; }
|
|
|
|
|
?>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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_4.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 :<";
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</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>
|
|
|
|
|
|
