< 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 >
< h2 > Podcast 1: Mediating speech< / h2 >
< h3 align = "center" > Episodes & Metadata< / h3 >
< table > < tr >
<?php
$files = glob("podcasts/*.*.mp3"); for ($i=1; $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:1200px; left: 50% !important;" > ';include("texts/podcast-transcription.txt");
echo '< / div > < p style = "font-size:14px;line-height:1;text-align: left;" > ';
include("texts/podcast-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 >
