more styling on hover/tabs
parent
8dd13722ea
commit
103945c341
@ -0,0 +1,186 @@
|
|||||||
|
<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">Podcast3 </a>
|
||||||
|
<a href="podcast4.php" class="active">Podcast4 </a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h3>
|
||||||
|
"City Sounds Reveal Voice Binaries"
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<table><tr>
|
||||||
|
<?php
|
||||||
|
$files = glob("podcasts/podcast4/*.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 them or annotate them with your vocal messages. You can listen to the podcasts with headphones... </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>
|
||||||
|
|
||||||
Loading…
Reference in New Issue