<!DOCTYPE html>
< 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 >
<!-- intro pop up -->
< div class = "draggable radioactive popup" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < div >
<?php
include 'texts-radioactive/about-popup.txt';
?>
< / div > < / div >
<!-- <FORM ACTION="scripts/cgi - bin/echo.cgi"> -->
<!-- <h3>CONTRIBUTORS' VOICES</h3> -->
< table width = "100%" 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 < a href = "http://artlibre.org/licence/lal/en/" > Free Art License< / a > < br >
If you want your full name to appear in the contributors list send me your name here: angeliki@genderchangers.org. The voices files will be part of this platform and future performances.
< / 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 >
< 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 dataURL = document.getElementById("dataUrlcontainer").innerHTML;
$.ajax({
type: "POST",
url: "scripts/uploadMp3_5.php",
data: {
base64: dataURL,
name: name,
type: type
},
success: function(data)
{
// ? :)
alert (data);
},
error : function(data)
{
alert("ajax error, json: " + data);
//for (var i = 0, l = json.length; i < l ; + + i )
//{
// alert (json[i]);
//}
}
}).done(function(o) {
console.log('saved');
document.getElementById("saved_msg").innerHTML = "Uploaded!! Your voice will be distorted and re-uploaded in a few hours :< ";
});
}
< / script >
<!-- <form name="pyform" method="POST" action="/scripts/cgi - bin/echo.cgi">
< input type = "text" name = "fname" / >
< input type = "submit" name = "submit" value = "Submit" / >
< / form > -->
< / body >
< / html >
