<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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="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> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <br><br> <h3 id="box-title" style="width: 200px; left: 45%; position: absolute;"> "Mediating Speech" </h3> <!-- draggable menu--> <div class="draggable" style="top: 740px; right: 300px;"> <h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2> </div> <div class="draggable" style="top: 948.6px; right: 30px;"> <h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2> </div> <div class="draggable" style="top: 848.533px; right: 5px;"> <h2 ><a href="player.html" target="_blank">Player</a></h2> </div> <div class="draggable" style="top: 540px; right: 1900px;"> <h2 ><a href="index.php" target="_blank">About</a></h2> </div> <div class="draggable" style="top: 4px; right: 1500px;z-index: 1;"> <h2 ><a href="podcast1.php" target="_blank">Podcast1</a></h2> <div class="drag-content">Podcast1 "Mediating Speech" is about the amplification of one's voice through another person.<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="podcast2.php" target="_blank">Podcast2</a></h2> </div> <div class="draggable" style="top: 320px; right: 100px;"> <h2 ><a href="podcast3.php" target="_blank">Podcast3</a></h2> </div> <div class="draggable" style="top: 420px; right: 80px;"> <h2 ><a href="podcast4.php" target="_blank">Podcast4</a></h2> </div> <div class="draggable" style="top: 640px; right: 2000px; z-index: 9;"> <h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2> </div> <br><br><br><br><br><br> <table><tr> <?php $files = glob("podcasts/podcast1/*.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/1/*"); 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 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> <!-- 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.php", data: { base64: dataURL } }).done(function(o) { console.log('saved'); }); } </script> </body> </html>