< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< 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 >
< link href = "styles/stylesheet.css" rel = "stylesheet" type = "text/css" >
< / head >
< body >
< div class = "navbar" >
< a href = "podcast1.php" class = "active" > Podcast1 < / a >
< a href = "podcast2.php" > Podcast2 < / a >
< a href = "podcast3.php" > Podcast3 < / a >
< a href = "podcast4.php" > Podcast4 < / a >
< / div >
< h3 >
"Mediating speech"
< / h3 >
This podcast is a series of episodes of moments of an online audio archive overlayered by my voice as a narrator.
< table > < tr >
<?php
$files = glob("podcasts/podcast1/*.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 and record with any microphone. < / p >
<!-- keep the time of file limited -->
< / 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 >
< div class = "recorder" >
< input type = "button" class = "start" value = "Record" / >
< input type = "button" class = "stop" value = "Stop" / >
< pre class = "status" > < / pre >
< / div >
< div > < button onclick = "upload()" > Upload< / button > < / div >
< div id = "playerContainer" > < / div >
< div id = "dataUrlcontainer" hidden > < / div >
< pre id = "log" > < / pre >
< audio controls = "true" id = "audio" src = "" > < / audio >
< div id = "dataUrlcontainer" hidden > < / div >
< section style = "float:right;" >
<!-- 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 >
<!-- 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 >
<!-- 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) { });
});
$('.recorder .stop').on('click', function() {
$this = $(this);
$recorder = $this.parent();
recorderObject = $recorder.data('recorderObject');
recorderObject.stop();
recorderObject.exportWAV(function(base64_wav_data) {
var url = 'data:audio/wav;base64,' + base64_wav_data;
var au = document.createElement('audio');
document.getElementById("playerContainer").innerHTML = "";
//console.log(url)
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/uploadWav.php",
data: {
wavBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
< / script >
< / body >
< / html >
