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.

300 lines
9.0 KiB
PHP

<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>Podcast1</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;">
Mediating Speech
</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: 130%; right: 7%;">
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</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 active-draggable" style="top: 3%; right: 3%">
<h2 ><a class="active" href="podcast1.php">Podcast1</a></h2>
<div class="drag-content">
<?php include 'texts/podcast1.txt'; ?>
</div>
</div>
<div class="draggable scaleable-wrapper menu" style="top: 34%; right: 5%">
<h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper menu" style="top: 44%; right: 3%">
<h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper menu" style="top: 53%; right: 8%">
<h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</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><br>
<table>
<tr>
<td></td>
<td><h3 style="text-align: left !important">EPISODES</h3></td>
</tr>
<tr>
<td><img src="images/headphones_logo.png" width="40px"></td>
<?php
$files = glob("podcasts/podcast1/*.mp3");
for ($i=0; $i<count($files); $i++)
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '<td><audio src='.$num.' controls></audio>';
echo '<div class="tooltip-wrap" style="left:1%; top:-10px;"><img src="images/plus-icon.png" width="20px"><div class="tooltip-content-down content-transcription"><div class="left_col"><h3>NARRATOR</h3>';include $num.'.txt';
echo '</div><div class="right_col"><h3>SPEAKERS</h3>'; include $num.'-M.txt';
echo '</div></div></div>';
echo '<div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
include $num.'-METADATA.txt';
echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
</tr></table>
<br>
<div align="center">
<?php include 'texts/dear_listener.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>
<br />
<br />
<br />
<h3>VISITORS' RECORDINGS</h3><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 />';
// echo '<div id="name"></div>';
echo date("d/m/Y",filemtime($num)).'<br /><br />'; }
?>
</div>
</div>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
<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="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/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 dataURL = document.getElementById("dataUrlcontainer").innerHTML;
$.ajax({
type: "POST",
url: "scripts/uploadMp3_1.php",
data: {
base64: dataURL
}
}).done(function(o) {
console.log('saved');
document.getElementById("saved_msg").innerHTML = "Saved '*|o.o/*' You can now refresh and see your voice message in the list below :<";
});
// var person = prompt("Please enter a title or a name");
// if (person != null) {
// document.getElementById("name").innerHTML =
// person;
}
// }
</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>
</body>
</html>