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.
189 lines
5.2 KiB
PHP
189 lines
5.2 KiB
PHP
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="navbar">
|
|
<a href="podcast1.php">Podcast1 </a>
|
|
<a href="podcast2.php">Podcast2 </a>
|
|
<a href="podcast3.php" class="active">Podcast3 </a>
|
|
</div>
|
|
|
|
|
|
<h3>
|
|
"Blocking our Voices"
|
|
</h3>
|
|
|
|
|
|
|
|
<table><tr>
|
|
<?php
|
|
$files = glob("podcasts/podcast3/*.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="width: 500px;border:1px red;border-style: dashed;padding: 10px;">
|
|
<p>Dear listener,</p>
|
|
<p>you are invited to amplify parts of the podcasts that you find interesting by repeating/recording them or annotate them with your vocal comments </p>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
|
|
<section style="float:right;">
|
|
|
|
|
|
|
|
|
|
<!-- save the new recordings -->
|
|
<?php
|
|
if(!is_dir("recordings")){
|
|
$res = mkdir("recordings",0777);
|
|
}
|
|
|
|
// pull the raw binary data from the POST array
|
|
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
|
|
$filename = urldecode($_POST['fname']);
|
|
|
|
// write the data out to the file
|
|
$fp = fopen('recordings/'.$filename, 'wb');
|
|
fwrite($fp, $decodedData);
|
|
fclose($fp);
|
|
?>
|
|
|
|
|
|
|
|
|
|
<!-- scripts for dictaphone -->
|
|
<script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script>
|
|
|
|
<!-- Below is your custom application script -->
|
|
<script src="scripts/app.js"></script>
|
|
|
|
<script>
|
|
function saveAudio(){
|
|
var req = null;
|
|
var url = "savefile.php";
|
|
var data = document.getElementById("save").href.toString();// document.getElementById("save").innerHTML;// = xhttp.responseText;; // you have to check how to get the data from your saveAudio() method
|
|
window.alert(data);
|
|
|
|
(window.XMLHttpRequest) ? req = new XMLHttpRequest() : (window.ActiveXObject) ? req = new ActiveXObject("Microsoft.XMLHTTP") : req = false;
|
|
req.open("POST", url, true);
|
|
req.setRequestHeader("Content-Type", "multipart/form-data");
|
|
|
|
if(data != null) //&& data != "")
|
|
{
|
|
req.setRequestHeader("Content-length", data.length);
|
|
req.send(data);
|
|
}}
|
|
|
|
|
|
// <!-- attempt to save the new recordings -->
|
|
<?php
|
|
|
|
$save_folder = dirname(__FILE__) ."/js";
|
|
if(! file_exists($save_folder)) {
|
|
if(! mkdir($save_folder)) {
|
|
die("failed to create save folder $save_folder");
|
|
}
|
|
}
|
|
|
|
$key = 'filename';
|
|
$tmp_name = $_FILES["audiofile"]["tmp_name"];
|
|
$upload_name = $_FILES["audiofile"]["name"];
|
|
$type = $_FILES["audiofile"]["type"];
|
|
$filename = "$save_folder/$upload_name";
|
|
$saved = 0;
|
|
if(($type == 'audio/x-wav' || $type == 'application/octet-stream') && preg_match('/^[a-zA-Z0-9_\-]+\.wav$/', $upload_name) ) {
|
|
|
|
$saved = move_uploaded_file($tmp_name, $filename) ? 1 : 0;
|
|
}
|
|
|
|
//name is needed to send in the php file
|
|
|
|
?>
|
|
|
|
|
|
</script>
|
|
|
|
<!-- save recordings -->
|
|
<!-- <script>
|
|
function uploadAudio(mp3Data){
|
|
var reader = new FileReader();
|
|
reader.onload = function(event){
|
|
var fd = new FormData();
|
|
var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
|
|
console.log("mp3name = " + mp3Name);
|
|
fd.append('fname', mp3Name);
|
|
fd.append('data', event.target.result);
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: 'upload.php',
|
|
data: fd,
|
|
processData: false,
|
|
contentType: false
|
|
}).done(function(data) {
|
|
//console.log(data);
|
|
log.innerHTML += "\n" + data;
|
|
});
|
|
};
|
|
reader.readAsDataURL(mp3Data);
|
|
}
|
|
</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>
|
|
|