< 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" >
< / head >
< body >
<!-- draggable -->
< br > < br >
< h3 id = "box-title" style = "width: 200px; left: 45%; position: absolute;" >
"Voice's Transition"
< / h3 >
<!-- draggable menu -->
< div class = "draggable" style = "top: 740px; right: 300px;" >
< h2 > < a href = "amplification.html" > Amplification of female voices< / a > < / h2 >
< / div >
< div class = "draggable" style = "top: 948.6px; right: 30px;" >
< h2 > < a href = "" > Diary of West Rotterdam< / a > < / h2 >
< / div >
< div class = "draggable" style = "top: 848.533px; right: 5px;" >
< h2 > < a href = "player.html" > Player< / a > < / h2 >
< / div >
< div class = "draggable" style = "top: 540px; right: 1900px;" >
< h2 > < a href = "index.php" > About< / a > < / h2 >
< / div >
< div class = "draggable" style = "top: 270px; right: 1300px;z-index: 1;" >
< h2 > < a href = "podcast2.php" > Podcast2< / a > < / h2 >
< div class = "drag-content" > Podcast2 "Voice's Transition" is about the transformation of one's voice into another voice in terms of pitch that responds to another gender.< br > < i > It includes series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.< / i >
< / div >
< / div >
< div class = "draggable" style = "top: 220px; right: 10px;" >
< h2 > < a href = "podcast1.php" > Podcast1< / a > < / h2 >
< / div >
< div class = "draggable" style = "top: 320px; right: 100px;" >
< h2 > < a href = "podcast3.php" > Podcast3< / a > < / h2 >
< / div >
< div class = "draggable" style = "top: 420px; right: 80px;" >
< h2 > < a href = "podcast4.php" > Podcast4< / a > < / h2 >
< / div >
< div class = "draggable" style = "top: 640px; right: 2000px; z-index: 9;" >
< 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/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 = "background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;" >
< p > Dear listener,< / p >
< p > you are invited to < div class = "tooltip-wrap" style = "display: inline;text-decoration:underline;" > amplify< div class = "tooltip-content-right" > < div > Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone" < / div > < / div > < / div > 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 -->
<!-- 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 > -->
<!-- voice visualizer/LICENSE web dictaphone -->
<!-- recorder -->
< div class = "recorder" >
< input type = "button" class = "start" value = "Record" / >
< input type = "button" class = "stop" value = "Stop" / >
< pre class = "status" > < / pre >
< / div >
< div > < button onclick = "upload()" > Upload< / button > < / div >
< div id = "playerContainer" > < / div >
< div id = "dataUrlcontainer" hidden > < / div >
< pre id = "log" hidden > < / pre >
< / div >
< br / >
< br / >
< br / >
<?php
$files = glob("uploads/2/*");
for ($i=0; $i< count ( $ files ) ; $ i + + )
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '< audio src = '.$num.' controls > < / audio > < br / > < br / > '; }
?>
< / div >
<!-- scripts for dictaphone -->
<!-- <script src="scripts/mediaDevices - getUserMedia - polyfill.js"></script> -->
<!-- Below is your custom application script -->
<!-- <script src="scripts/app.js"></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/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) { });
});
$('.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)
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_2.php",
data: {
base64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
< / 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 >
