You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

281 lines
9.0 KiB
PHTML

<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/radioactive.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<title>Radioactive Monstrosities</title>
<link rel="shortcut icon" href="images/headphones_logo.png" />
<style>
h3 {font-weight: normal !important; float: left;}
body {background:none !important;}
</style>
</head>
<body>
<!-- table of voices -->
<h1>Radio-active <div class="tooltip-wrap">Monstrosities<div class="tooltip-content-right" ><div>
<?php
include 'texts-radioactive/female_monstrosity.txt';
?>
</div></div></div></h1>
<!-- <h3>CONTRIBUTORS' VOICES</h3> -->
<table class="radioactive">
<tr>
<th><div class="tooltip-wrap">./collective_voice<div class="tooltip-content-right" >The speaker's voice is channeled through multiple voices and in this case through distorted mediated voices of the same person</div></div></th>
<th><div class="tooltip-wrap">./echo_voice<div class="tooltip-content-right">A voice that is more distant from the speaker, sounding like being
in an outer space inside the medium. This voice resembles sounds from an online call</div></div></th>
<th><div class="tooltip-wrap">./lowpith_voice<div class="tooltip-content-right" >A voice that sounds more male because of lowering its pitch</div></div></th>
<th><div class="tooltip-wrap">./lowpass_voice<div class="tooltip-content-right" >A voice that sounds like "shrill" if it is in high frequencies.
This script doesn't allow high frequencies to pass through</div></div></th>
</tr>
<tr>
<?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);
echo '<td>';
foreach($items as $item) {
$url=substr($item['file'],3);
if (strpos($item['type'], 'collective') !== false){
echo '<div class=file>';
echo '<audio src='.$url.' controls></audio> ';
echo $item['name'];
echo '</div><br />';
}
}
echo '</td>';
echo '<td>';
foreach($items as $item) {
$url=substr($item['file'],3);
if (strpos($item['type'], 'echo') !== false){
echo '<div class=file>';
echo '<audio src='.$url.' controls></audio> ';
echo $item['name'];
echo '</div><br />';
}
}
echo '</td>';
echo '<td>';
foreach($items as $item) {
$url=substr($item['file'],3);
if (strpos($item['type'], 'lowpitch') !== false){
echo '<div class=file>';
echo '<audio src='.$url.' controls></audio> ';
echo $item['name'];
echo '</div><br />';
}
}
echo '</td>';
echo '<td>';
foreach($items as $item) {
$url=substr($item['file'],3);
if (strpos($item['type'], 'lowpass') !== false){
echo '<div class=file>';
echo '<audio src='.$url.' controls></audio> ';
echo $item['name'];
echo '</div><br />';
}
}
echo '</td>';
?>
</tr>
<!-- recorder -->
<tr>
<td colspan="4">
<div align="center">
<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>
<div class="tooltip-wrap"><i class="fa fa-copyright fa-flip-horizontal"></i><div class="tooltip-content-right" ><div>
[Angeliki Diakrousi, Radioactive Monstrosities, 2020. Rotterdam].
Copyleft: This is a free work, you can copy, distribute, and modify it under the terms of the Free Art License
http://artlibre.org/licence/lal/en/
You can choose the type of lisence you want
If you want your full name to appear in the contributors send me your name here: angeliki@genderchangers.org
The copyrights of the voices belong to you. I ask you to use them in the performance radio-active monstrosities where I will narrate ...Only for this recording. You can choose to include your name or not.Your voice recordings will be used and credited accordingly
</div></div></div>
<br>
<div class="tooltip-wrap"><i class="fa fa-file"></i><div class="tooltip-content-right" ><div>
<?php
include 'texts-radioactive/about.txt';
?>
</div></div></div><br>
<div class="tooltip-wrap"><i class="fa fa-gears"></i><div class="tooltip-content-right" ><div>
<?php
include 'texts-radioactive/instructions.txt';
?>
</div></div></div><br>
<a href="https://gitlab.com/nglk/radioactive-web">git</a>
</td>
</tr>
<!-- texts-radioactive and references -->
<tr>
<?php
echo '<td>';
include 'texts-radioactive/voice_collective.txt';
echo '</td>';
echo '<td>';
include 'texts-radioactive/voice_echo.txt';
echo '</td>';
echo '<td>';
include 'texts-radioactive/voice_lowpitch.txt';
echo '</td>';
echo '<td>';
include 'texts-radioactive/voice_lowpass.txt';
echo '</td>';
?>
</tr>
</table>
<?php
exec("~/virtualenvs/radioactive/bin/python3 scripts/echo.py").$name;
?>
<!-- <audio src='uploads/5/out.wav' controls></audio> -->
<!-- exec("~/virtualenvs/radioactive/bin/python3 mypythonscript.py " -->
<!-- exec("scripts/echo.py ".$name, $output); -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="js/jquery.min.js"></script>
<script 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>
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. Choose between collective,echo,lowpitch,lowpass','No Type');
var license = prompt('Enter a license. Choose between collective,echo,lowpitch,lowpass','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>