<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>