eaiaiaiaoi/COPYradioactive_monstrosity...

<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>Radioactive Monstrosity</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;">
  Voice's Transition
</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: 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 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>

<div align="center">
    <?php include 'texts/radioactive_contribution.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>

    <h3>VISITORS' VOICES</h3>
    <?php
    $items=array();
    $handle=fopen('./uploads/5/index.jsons','r');
    if ($handle) {
      while (($line=fgets($handle)) !== false) {
        $item=json_decode($line,true);
        $items[]=$item;

      }
    }
    $items=array_reverse($items);
    foreach($items as $item) {
      $url=substr($item['file'],3);
      echo '<div class=file>';
      echo '<audio src='.$url.' controls></audio><br />';
      echo '<div class="filename">'.$item['name'].'</div>';
      echo '<div class="file_date">'.$item['date'].'</div>';
      echo '<div class="file_type">'.$item['type'].'</div>';
      echo '</div><br />';
    }
    ?>
</div>

</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="js/jquery-1.12.4.js"></script>
<script src="js/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 name = prompt('Enter a title or/and your name','Unnamed clip');
    var type = prompt('Enter type of distortion','No Type');
    var dataURL = document.getElementById("dataUrlcontainer").innerHTML;

      $.ajax({
      type: "POST",
      url: "scripts/uploadMp3_5.php",
      data: {
          base64: dataURL,
          name: name,
          type: type
       }
    }).done(function(o) {
      console.log('saved');
      document.getElementById("saved_msg").innerHTML = "Uploaded!! Refresh and see your voice message in the list below :<";

      });

    }

  </script>


</body>

</html>